/* ==========================================================================
   Device system
   --------------------------------------------------------------------------
   Custom hardware, not a stock frame. Every device is composed from the same
   primitive so lighting stays consistent down the page: one key light from
   the upper left, a warm ambient bounce matching the page background, and a
   contact shadow that tightens as the device sits closer to the surface.

   Each composition sets two custom properties and nothing else:
     --w      the device width
     --tilt   the resting transform

   Both are read by the float animation, so a device keeps its perspective
   while it moves. Never override `transform` directly on .device.
   ========================================================================== */

.device {
    --w: 300px;
    --tilt: none;
    --radius: calc(var(--w) * 0.128);
    --bezel: calc(var(--w) * 0.030);

    position: relative;
    width: var(--w);
    transform: var(--tilt);
    transform-style: preserve-3d;
    flex: 0 0 auto;
}

/* Contact shadow. Separate from the body so it can stay on the ground plane
   while the device above it tilts. */
.device::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: calc(var(--w) * -0.06);
    height: calc(var(--w) * 0.16);
    background: radial-gradient(ellipse at 50% 50%, rgba(45, 35, 37, 0.30) 0%, rgba(45, 35, 37, 0.10) 45%, transparent 72%);
    filter: blur(calc(var(--w) * 0.05));
    z-index: -1;
    pointer-events: none;
}

/* The body is the hardware: a machined edge catching light on two sides. */
.device-body {
    position: relative;
    padding: var(--bezel);
    border-radius: var(--radius);
    background:
        linear-gradient(148deg,
            #7a6c70 0%,
            #3b3134 9%,
            #221b1e 26%,
            #191315 50%,
            #1f1a1c 68%,
            #342c2f 86%,
            #6b5d61 100%);
    box-shadow:
        /* contact */
        0 1px 2px rgba(45, 35, 37, 0.14),
        0 6px 12px rgba(45, 35, 37, 0.10),
        /* mid */
        0 22px 38px rgba(45, 35, 37, 0.14),
        /* ambient */
        0 52px 80px rgba(45, 35, 37, 0.13),
        0 90px 130px rgba(45, 35, 37, 0.08),
        /* machined rim */
        inset 0 0 0 1px rgba(255, 255, 255, 0.13),
        inset 0 1px 1px rgba(255, 255, 255, 0.26),
        inset 0 -1px 1px rgba(255, 255, 255, 0.10);
}

/* Glass sits above the display: a hairline inner edge, so the screen reads as
   recessed rather than printed onto the bezel. */
.device-body::before {
    content: "";
    position: absolute;
    inset: var(--bezel);
    border-radius: calc(var(--radius) - var(--bezel));
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.55),
        inset 0 2px 6px rgba(0, 0, 0, 0.30);
    z-index: 3;
    pointer-events: none;
}

/* The viewport is the display. Its background is sampled from the top edge of
   every screenshot (#FFF7F2), so the status bar reads as part of the app
   rather than a strip pasted above it. */
.device-viewport {
    position: relative;
    z-index: 1;
    border-radius: calc(var(--radius) - var(--bezel));
    overflow: hidden;
    background: #FFF7F2;
}

.device-statusbar {
    height: calc(var(--w) * 0.108);
    padding: 0 calc(var(--w) * 0.085) calc(var(--w) * 0.004);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(var(--w) * 0.039);
    font-weight: 600;
    color: var(--color-text-dark);
    letter-spacing: 0.01em;
}

.device-indicators {
    display: flex;
    align-items: center;
    gap: calc(var(--w) * 0.014);
}

.device-indicators i {
    display: block;
    background: var(--color-text-dark);
    opacity: 0.85;
}

.device-indicators .sig {
    width: calc(var(--w) * 0.044);
    height: calc(var(--w) * 0.030);
    clip-path: polygon(0 100%, 22% 100%, 22% 62%, 0 62%, 0 100%, 33% 100%, 55% 100%, 55% 38%, 33% 38%, 33% 100%, 66% 100%, 88% 100%, 88% 0, 66% 0, 66% 100%);
    border-radius: 1px;
}

.device-indicators .bat {
    width: calc(var(--w) * 0.058);
    height: calc(var(--w) * 0.028);
    border-radius: calc(var(--w) * 0.008);
}

.device-screen {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

/* Specular sheen. Deliberately weak — the interface has to stay legible. */
.device-gloss {
    position: absolute;
    inset: var(--bezel);
    border-radius: calc(var(--radius) - var(--bezel));
    background: linear-gradient(112deg,
        rgba(255, 255, 255, 0) 26%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.05) 47%,
        rgba(255, 255, 255, 0) 58%);
    z-index: 2;
    pointer-events: none;
}

.device-island {
    position: absolute;
    top: calc(var(--bezel) + var(--w) * 0.018);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--w) * 0.255);
    height: calc(var(--w) * 0.072);
    border-radius: 100px;
    background: #0a0809;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10);
    z-index: 4;
}

/* Side hardware. Visible once a device is tilted, which is what sells depth. */
.device-btn {
    position: absolute;
    border-radius: 2px;
    background: linear-gradient(180deg, #4c4145 0%, #221c1e 45%, #3a3134 100%);
    z-index: 0;
}

.device-btn--power {
    right: calc(var(--w) * -0.008);
    top: 22%;
    width: calc(var(--w) * 0.011);
    height: calc(var(--w) * 0.15);
}

.device-btn--vol-a {
    left: calc(var(--w) * -0.008);
    top: 17%;
    width: calc(var(--w) * 0.011);
    height: calc(var(--w) * 0.055);
}

.device-btn--vol-b {
    left: calc(var(--w) * -0.008);
    top: 25%;
    width: calc(var(--w) * 0.011);
    height: calc(var(--w) * 0.095);
}

/* ==========================================================================
   Compositions — one per section, so the eye is never asked to look at the
   same arrangement twice.
   ========================================================================== */

/* Hero: two devices, one behind the other. The pair says "more than one
   surface" before a single word is read. */
.device--hero {
    --w: 335px;
    --tilt: perspective(2200px) rotateY(-17deg) rotateX(4deg) rotateZ(-1.2deg);
}

/* The device behind: further away, cooler, out of focus. */
.device--behind {
    --w: 238px;
    --tilt: perspective(2200px) rotateY(-17deg) rotateX(4deg) rotateZ(-1.2deg) translateZ(-90px);
    position: absolute;
    top: 12%;
    right: -6%;
    opacity: 0.62;
    filter: blur(1.4px) saturate(0.85);
    z-index: 0;
}

/* Chain step one: turned toward the reader. */
.device--right {
    --w: 300px;
    --tilt: perspective(2000px) rotateY(15deg) rotateX(3deg) rotateZ(0.8deg);
}

/* Chain step two: seen slightly from above, as if set down on a table. */
.device--above {
    --w: 300px;
    --tilt: perspective(1500px) rotateX(11deg) rotateY(-4deg);
}

/* Chain step three: mirrored, closing the sequence. */
.device--left {
    --w: 300px;
    --tilt: perspective(2000px) rotateY(-15deg) rotateX(3deg) rotateZ(-0.8deg);
}

/* Closing: square to the reader. Nothing left to demonstrate. */
.device--calm {
    --w: 310px;
    --tilt: none;
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes deviceFloat {
    0%, 100% { transform: var(--tilt) translateY(0); }
    50%      { transform: var(--tilt) translateY(-14px); }
}

.device--float {
    animation: deviceFloat 7s ease-in-out infinite;
}

.device--float.device--behind {
    animation-duration: 8.5s;
    animation-delay: -1.8s;
}

@media (prefers-reduced-motion: reduce) {
    .device--float {
        animation: none;
    }
}

/* ==========================================================================
   Stages — the space a composition occupies
   ========================================================================== */
.stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.stage--hero {
    min-height: 640px;
}

.stage--calm {
    padding: 20px 0 40px 0;
}

@media (max-width: 968px) {
    .device--hero  { --w: 280px; }
    .device--behind { --w: 200px; right: 5%; top: 14%; }
    .stage--hero   { min-height: 540px; }
}

@media (max-width: 620px) {
    .device--hero   { --w: 244px; --tilt: perspective(2200px) rotateY(-12deg) rotateX(3deg); }
    .device--behind { display: none; }
    .device--right,
    .device--left,
    .device--above  { --w: 254px; }
    .device--calm   { --w: 260px; }
    .stage--hero    { min-height: 470px; }
}