/*
 * The company sign-in page — the owner's approved design of 2026-10-21.
 *
 * The spec is `docs/superpowers/specs/2026-10-21-login-redesign.html`; this
 * file is that stylesheet, made bidirectional and given the few things a
 * mock-up has no need of (the error box, the language switch, a focus ring on
 * every control rather than on the inputs alone).
 *
 * -------------------------------------------------------------------------
 * A plain stylesheet in public/, not a Vite entry
 * -------------------------------------------------------------------------
 * This repository ships no application bundle: `public/build` is not tracked
 * (`git ls-files public/build` is empty) and the two existing sign-in shells
 * — `resources/views/components/auth-layout.blade.php` and
 * `resources/views/central/auth/layout.blade.php` — both carry their CSS
 * inline for exactly that reason. `public/css/` is the tracked home of the
 * stylesheets this application serves without a build step (the company
 * panel's published theme lives there too), so the page links this file and
 * nothing has to be compiled before a sign-in screen renders.
 *
 * -------------------------------------------------------------------------
 * Logical properties throughout, because this page is served in two languages
 * -------------------------------------------------------------------------
 * The spec is written RTL-only and uses physical sides in two places. Every
 * one of them is a logical property here, so the English page mirrors instead
 * of being laid out backwards. The one deliberate difference is the inputs'
 * padding: the spec gives the text 40px of room on one side and 13px on the
 * other, which is right for Arabic and wrong for English — and wrong again
 * for the two fields the Blade marks `dir="ltr"` (a company slug and an email
 * address are Latin whatever the page's language, so they resolve their OWN
 * inline axis and a logical padding would land on the far side from the
 * icon). Symmetric 40px gutters render identically to the spec in Arabic and
 * stay correct in every one of those combinations.
 */

:root {
    --ink: #10193A;
    --muted: #5C6886;
    --faint: #94A3B8;
    --rule: #E1E6F2;
    --rule-strong: #C9D1E6;
    --primary: #2F55D4;
    --primary-dark: #1B2A6B;
    --primary-soft: #EEF2FF;
    --accent: #14B8A6;
    --font: 'Cairo', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --display: 'Almarai', 'Cairo', sans-serif;
    --latin: 'Inter', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The page is one deliberate palette. A browser in dark mode must not invert
   half of it — `color-scheme: light` is what keeps the white panel white. */
html { color-scheme: light; }

/*
 * The page is a SCREEN, not a document — owner's ruling of 2026-10-21 on the
 * live page: it must fit the viewport at every common desktop size and never
 * produce a scrollbar. Everything below that is sized in `vh`, clamped, or
 * allowed to shrink exists to keep that true; a rule that lets any of it grow
 * past the fold is a bug and not a preference.
 *
 * `overflow: hidden` here and on `.lay` rather than on one of them: the body
 * is what a browser scrolls when a child overflows, and the layout is what
 * must not hand it anything to scroll.
 */
body {
    margin: 0;
    background: #0B1431;
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

svg { display: block; }

/* The hidden sprite at the top of the document. Out of flow so it cannot
   occupy a row of its own above the layout; the only reason it is a rule here
   rather than an inline style is that every other inline value on this page is
   a custom property carrying DATA (a tile's angle), and one lone declaration
   among them reads as an exception somebody forgot to tidy. */
.sprite { position: absolute; width: 0; height: 0; }

.lay {
    display: grid;
    grid-template-columns: minmax(400px, 480px) 1fr;
    /* `dvh` second so a browser that understands it wins: on a telephone the
       toolbars make `vh` taller than the visible area, which is the one place
       `100vh` alone produces the scroll this rule exists to prevent. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ===== brand ===== */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { width: 46px; height: 46px; border-radius: 13px; display: block; }
.brand .word { font-family: var(--latin); font-size: 27px; letter-spacing: -1px; line-height: 1; direction: ltr; }
.brand .word b { font-weight: 800; color: var(--primary-dark); }
.brand .word span { font-weight: 500; color: var(--accent); }
.brand .tag { display: block; font-size: 11px; font-weight: 600; color: #5B6B8C; margin-top: 4px; font-family: var(--font); }

/* ===== panel (first in the DOM, so right under RTL and left under LTR) ===== */
.panel {
    background: #fff;
    padding: 40px clamp(24px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    /* The form is the one thing on this page that must never be cut off. It
       may scroll INSIDE its own column on a short window — which is not the
       page scrolling, and is what keeps `.lay`'s promise honest when a
       browser's zoom or a 720px-tall screen leaves genuinely too little
       room. */
    overflow-y: auto;
    box-shadow: -30px 0 80px -40px rgba(0, 0, 0, .55);
}
/* The shadow falls towards the scene, which is on the other side in English. */
html[dir="ltr"] .panel { box-shadow: 30px 0 80px -40px rgba(0, 0, 0, .55); }

.panel .box { width: 100%; max-width: 380px; margin: 0 auto; }
.panel .top { display: grid; place-items: center; text-align: center; margin-bottom: 28px; }
/* An `<h1>` rather than the spec's bare `<div>`, so the page has a heading a
   screen reader can land on - which means undoing the browser's own 2em bold
   and its margins, or the title renders at twice the size the design draws. */
.panel .title { color: var(--muted); font-size: 14px; font-weight: 400; margin: 14px 0 0; }

/* ===== the language switch ===== */
.lang {
    position: absolute;
    top: 18px;
    inset-inline-end: clamp(16px, 3vw, 28px);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--faint);
}
.lang a { color: var(--muted); text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.lang a:hover { color: var(--primary); }
.lang a[aria-current="true"] { color: var(--primary); background: var(--primary-soft); }
.lang span { color: var(--rule-strong); }

/* ===== fields ===== */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 700; font-size: 13px; }
.field .hint { color: var(--faint); font-size: 12px; }

.inp { position: relative; }
.inp .ic {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--faint);
    pointer-events: none;
}
.inp .ic svg { width: 18px; height: 18px; }

.input {
    width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 12px 40px;
    border: 1px solid var(--rule-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(47, 85, 212, .14); }
.input::placeholder { color: #B7C0D6; }

.eye {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--faint);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.eye:hover { color: var(--muted); }
.eye svg { width: 18px; height: 18px; }

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 20px;
    font-size: 13px;
}
.row a { color: var(--primary); text-decoration: none; font-weight: 700; }
.chk { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.chk input { accent-color: var(--primary); width: 17px; height: 17px; border-radius: 4px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    font: inherit;
    font-weight: 800;
    font-size: 16px;
    padding: 14px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 26px -12px rgba(47, 85, 212, .85);
    transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); background: #2446b8; }
.btn svg { width: 20px; height: 20px; }
/* The arrow points the way the reader's eye travels: back along the line in
   Arabic, forward in English. One glyph, mirrored, rather than two paths. */
html[dir="ltr"] .btn svg { transform: scaleX(-1); }

.safe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
    color: var(--muted);
    font-size: 12.5px;
}
.safe svg { width: 18px; height: 18px; color: var(--faint); }

/* ===== the refusal ===== */
.errors {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.7;
}

/* ===== scene ===== */
.scene {
    position: relative;
    overflow: hidden;
    /* A column rather than a two-row grid: the copy block takes the height it
       needs and the stage takes WHAT IS LEFT, which is the only arrangement in
       which the rings cannot push the four features past the bottom of the
       screen — the fault the owner saw at 1920×926. */
    display: flex;
    flex-direction: column;
    padding: 24px clamp(24px, 4vw, 64px) 32px;
    color: #fff;
    background: radial-gradient(70% 70% at 35% 40%, #1A2A6E, #0B1431 70%);
}
.stage {
    position: relative;
    z-index: 2;
    width: min(900px, 100%);
    /*
     * How big the orbit is, as a fraction of the spec's own geometry — read
     * by the rings AND by the mark, which is why it lives here rather than on
     * `.cyl`: a ring that grew while the logo at its centre stayed 84px is
     * exactly the «the mark looks small» the owner saw.
     *
     * TWO KNOBS, and keeping them apart is the whole of this fix:
     *
     *   --ring    how big the FURNITURE is — the tiles, and the mark at the
     *             centre. 1 at 860px tall and above, where the scene must look
     *             like the approved spec: 58px tiles and an 84px mark. Stepped
     *             below that and never under .7.
     *
     *   --radius  how WIDE the orbit is, and nothing else. The spec was drawn
     *             for a scene about 960px across; the scene here is the window
     *             minus the 480px panel, so 1056px at 1536 and 1440px at 1920,
     *             and the spec's 300px radius reads as a toy in a hall.
     *
     * The first version of this fix scaled the whole ring by the width, which
     * widened the orbit and fattened every tile with it — 104px tiles sitting
     * on top of the logo, which is the opposite of the approved picture. The
     * radius is a `translateZ` on each tile and the furniture is a `scale()`
     * on the ring, so separating them is one multiplication in each place.
     */
    /* 1.15 at 860px tall and above - the owner's «closer and larger»: a 64px
       tile and a 96px mark, out of the spec's 56 and 84. */
    --ring: 1.15;
    --radius: 1;
    /* `flex: 1` + `min-height: 0` is the pair that lets a flex child SHRINK;
       without the second it refuses to go below its content and the column
       overflows instead. The clamp is the ceiling and the floor: never taller
       than 520px however much room there is, never shorter than 300px however
       little — below that the tiles would intersect the mark. */
    flex: 1 1 auto;
    min-height: 0;
    /* About 15% shorter than it was: the scene is compacted so the orbit sits
       closer to the reader and the mark reads larger. */
    height: clamp(255px, 39vh, 442px);
    max-height: clamp(255px, 39vh, 442px);
    /* `auto` on all four sides, not just the sides: the block margins absorb
       whatever room the copy block did not need, half above and half below,
       which centres the ring in the space that is left and puts the copy on
       the floor of the scene - the arrangement the spec's
       `grid-template-rows: 1fr auto` produced before this column replaced it. */
    margin: auto;
    perspective: 1200px;
    /*
     * One 3D rendering context for the rings AND the logo — owner's ruling of
     * 2026-10-21 on the live scene: the icons must ORBIT the mark, passing in
     * front of it on the near side and behind it on the far side.
     *
     * That is not something z-index can express. Until this line the logo was
     * a flat `z-index: 3` sibling painted after the rings, so it covered every
     * tile at every angle and the ring read as a halo BELOW it rather than a
     * cylinder around it. With `preserve-3d` here, the tiles' `translateZ`
     * and the centre block's own plane are sorted by actual depth, and the
     * occlusion happens because the tile is genuinely behind the mark.
     */
    transform-style: preserve-3d;
}

.tile {
    /* The spec's own 58px. The tile is INSIDE the ring, so `--ring`'s scale
       already applies to it — clamping it on `vh` as well shrank it twice and
       is what left 30px tiles on a 926px-tall screen. */
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(94, 234, 212, .4);
    backdrop-filter: blur(8px);
    color: #fff;
    /* Two shadows: the teal one is the floor's light caught under the tile,
       the black one is the tile's own weight. */
    box-shadow: 0 30px 24px -18px rgba(94, 234, 212, .45), 0 14px 30px -16px rgba(0, 0, 0, .7);
    position: relative;
}
.tile svg { width: 26px; height: 26px; }

/*
 * The mark, and nothing else, decides where the ring's axis is.
 *
 * `.center` used to be a two-row grid (mark over wordmark) centred on the
 * stage, which put the MARK's centre a wordmark's half-height ABOVE the ring's
 * plane — the «the logo sits above the ring» the owner saw. The wordmark is
 * taken out of flow and hung underneath instead, so this box is the mark's box,
 * its centre is the stage's centre, and the rings turn around it.
 *
 * `translateZ(0)` is load-bearing and not a hack: it puts this box on the
 * z = 0 plane OF THE STAGE'S 3D CONTEXT, which is what makes a tile at
 * `translateZ(+z)` paint over it and one at `translateZ(-z)` paint under it.
 * Without it the element is a plain 2D child and the browser is free to paint
 * it last. The old `z-index: 3` is gone for the same reason: a depth-sorted
 * context is the thing deciding now.
 */
.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    transform-style: preserve-3d;
    text-align: center;
}
.center .mark {
    display: block;
    /* The spec's 84px, in the ring's own proportion. */
    width: calc(84px * var(--ring, 1));
    height: calc(84px * var(--ring, 1));
    border-radius: calc(24px * var(--ring, 1));
    box-shadow: 0 24px 60px -20px rgba(47, 85, 212, .9);
}
/* Hung below the mark, out of flow, so it adds no height to the box whose
   centre is the axis. `nowrap` because it is two words that must never become
   two lines and move the mark's centre with them. */
.center .word {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: calc(10px * var(--ring, 1));
    font-family: var(--latin);
    font-size: calc(30px * var(--ring, 1));
    letter-spacing: -1px;
    direction: ltr;
    white-space: nowrap;
}
.center .word b { font-weight: 800; color: #fff; }
.center .word span { font-weight: 500; color: #5EEAD4; }

.cyl {
    /* `--ring` is inherited from `.stage`, which is also where the mark
       reads it. It is a stepped plain number rather than a `clamp()` of `vh`
       because CSS cannot add a length to a unitless number — the scale a
       `transform` wants has no unit, and `calc(.07vh + .1)` is simply an
       invalid declaration that a browser drops in silence. */
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    animation: rotY var(--d, 36s) linear infinite;
}
.cyl.rev { animation-direction: reverse; }
/*
 * `--z` is the ring's radius and it is a LENGTH written on each tile in the
 * markup (300px on the outer ring, 170px on the inner). Those stay as they
 * are — they are the spec's geometry — and `--radius` widens the orbit for a
 * wide scene without touching the size of anything standing in it.
 */
.cyl > div { position: absolute; left: 0; top: 0; transform: rotateY(var(--a)) translateZ(calc(var(--z, 300px) * var(--radius, 1))) translate(-50%, -50%) scale(var(--s, 1)); }

@keyframes rotY {
    from { transform: rotateX(-12deg) rotateY(0) scale(var(--ring, 1)); }
    to { transform: rotateX(-12deg) rotateY(360deg) scale(var(--ring, 1)); }
}

/*
 * THE MIRROR FLOOR - owner's decision of 2026-10-21, prototype 5 in
 * `light-ideas.html`. The spotlight that used to be here is gone - cone, halo,
 * the light on the mark and the breathing with them: the scene is lit from
 * BELOW now, and nothing falls from above.
 *
 * Four pieces, and only the first is a light:
 *
 *   .floor          a teal-to-blue ellipse under the orbit, slightly blurred:
 *                   the lit floor everything else is lit BY.
 *   .center .mirror the mark itself, flipped, faded and masked out before it
 *                   reaches the copy - the one part of this no gradient can
 *                   fake, because a reflection is the thing again.
 *   .tile::after    a soft teal smear under each tile, with a teal under-glow
 *                   in the tile's own shadow, so the ring is lit from beneath
 *                   wherever it happens to be standing.
 *   .center::before the pool where the logo meets its own reflection.
 *
 * Nothing here animates: the orbit turns, the light does not. So
 * `prefers-reduced-motion` has nothing to say about any of it.
 */

/* `scaleY(-1)` flips it, the mask fades it to nothing from the top up - which
   is what stops it reading as a second logo - and the blur is a millimetre of
   water, no more. */
.center .mirror {
    position: absolute;
    left: 50%;
    top: calc(100% + 48px * var(--ring, 1));
    width: calc(84px * var(--ring, 1));
    height: calc(84px * var(--ring, 1));
    transform: translate(-50%, 0) scaleY(-1) translateZ(-1px);
    /* The prototype's .35 was measured against a logo on an opaque square;
       this mark is a ribbon on a dark ground and reads fainter at the same
       number, so it is lifted a little and brought a little closer. */
    opacity: .42;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 80%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 80%);
    filter: blur(1.5px);
    pointer-events: none;
}
.center .mirror .mark { width: 100%; height: 100%; box-shadow: none; }

/* Where the logo meets its reflection. */
.center::before {
    content: '';
    position: absolute;
    inset: auto calc(-40px * var(--ring, 1)) calc(-34px * var(--ring, 1)) calc(-40px * var(--ring, 1));
    height: calc(28px * var(--ring, 1));
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(94, 234, 212, .7), transparent 70%);
    filter: blur(8px);
    transform: translateZ(-1px);
    pointer-events: none;
}

/* The wordmark catches the same light. */
.center .word { text-shadow: 0 0 18px rgba(94, 234, 212, .5); }

/* Each tile's own reflection. */
.tile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 118%;
    height: 60%;
    border-radius: 16px;
    background: linear-gradient(to bottom, rgba(94, 234, 212, .35), transparent);
    filter: blur(4px);
    pointer-events: none;
}

/*
 * At z = -1px rather than -400px: this ellipse is the FLOOR the scene stands
 * on now and not a glow in the far distance, so it belongs just behind the
 * plane the logo stands on. Every tile on the near side of the orbit still
 * passes in front of it.
 */
.floor {
    position: absolute;
    left: 50%;
    top: 66%;
    transform: translate(-50%, -50%) translateZ(-1px);
    width: min(760px, 88%);
    height: clamp(170px, 28vh, 260px);
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(94, 234, 212, .5),
        rgba(47, 85, 212, .2) 45%,
        transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}

/* ===== copy ===== */
/*
 * The block the owner saw spilling below the fold. It is `flex: none` so the
 * stage above it gives way first, and everything in it is one or two lines:
 * a heading that stops growing at 34px, a paragraph of at most two lines, and
 * four features whose sub-lines are single-line with an ellipsis rather than
 * wrapping a column taller.
 */
.copy { position: relative; z-index: 3; max-width: 640px; flex: none; }
.copy h2 { font-family: var(--display); font-size: clamp(22px, 2.2vw, 34px); line-height: 1.28; margin: 0 0 6px; font-weight: 800; }
.copy h2 em { font-style: normal; color: #5EEAD4; display: block; }
.copy p { margin: 0 0 14px; line-height: 1.75; color: #C7D3F2; font-size: clamp(13px, 1.6vh, 15px); max-width: 52ch; }
.copy p b { color: #fff; font-family: var(--latin); font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.feats > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The text beside each tile: one line each, clipped rather than wrapped, so
   four features cost a fixed two rows whatever the language says. `min-width:
   0` on both the row and this wrapper is what lets `text-overflow` happen at
   all — a flex item's default `min-width: auto` refuses to shrink below its
   content and the ellipsis never appears. */
.feats > div > div { min-width: 0; }
.feats b, .feats small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feats i {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #7C9BFF;
}
.feats i svg { width: 20px; height: 20px; }
.feats b { display: block; font-size: clamp(13px, 1.6vh, 15px); }
.feats small { display: block; color: #A9B7DE; font-size: clamp(11px, 1.35vh, 12.5px); margin-top: 1px; }

/* A single column of features below the width where two of them crowd —
   above 980px only, because below that the scene is gone entirely and a
   one-column rule there would be describing nothing. */
@media (max-width: 1240px) and (min-width: 981px) {
    .feats { grid-template-columns: 1fr; }
}

/*
 * The short window — 1366×768 and 1280×720 are the two common ones.
 *
 * The panel is the half that cannot be clipped, so this is where its own
 * air comes out: the brand block's gap to the title, the gap under each
 * field, and the space above the encryption line. Nothing is hidden and
 * nothing moves; the page simply stops being generous.
 */
/*
 * The two terms of `--ring`, stepped.
 *
 * HEIGHT: full size down to 860px, which is the line the owner drew — a
 * 1536×864 or 1920×926 screen gets the approved design and not a reduction of
 * it. Below that the orbit gives way rather than the copy block, in two steps,
 * and never below .7: a smaller ring than that is the «thin band» this file
 * was fixed for.
 */
@media (max-height: 859px) { .stage { --ring: .98; } }
@media (max-height: 739px) { .stage { --ring: .83; } }

/*
 * WIDTH: the spec was drawn for a scene about 960px across. The scene is as
 * wide as the window minus the 480px panel, so at 1536 it is ~1050 and at
 * 1920 it is ~1440 — and a ring drawn for 960 reads as a toy in either. These
 * two steps keep the orbit at roughly the same share of the scene's width as
 * the approved design has at the width it was drawn for.
 */
@media (min-width: 1500px) { .stage { --radius: 1.14; } }
@media (min-width: 1700px) { .stage { --radius: 1.34; } }

@media (max-height: 820px) and (min-width: 981px) {
    .panel { padding-block: 24px; }
    .panel .top { margin-bottom: 18px; }
    .panel .title { margin-top: 10px; }
    .brand .mark { width: 40px; height: 40px; }
    .brand .word { font-size: 24px; }
    .field { margin-bottom: 10px; gap: 4px; }
    .field .hint { font-size: 11.5px; }
    .input { padding-block: 10px; }
    .row { margin: 0 0 14px; }
    .btn { padding-block: 12px; font-size: 15px; }
    .safe { margin-top: 18px; }
    .errors { margin-bottom: 12px; padding: 8px 12px; }
    .scene { padding-block: 18px 24px; }
}

/* Below 980px the scene is gone and the panel is the whole screen — the
   telephone gets the form and nothing it has to scroll past to reach it. */
@media (max-width: 980px) {
    .lay { grid-template-columns: 1fr; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
    .scene { display: none; }
    .panel { box-shadow: none; overflow: visible; }
    /* A telephone MAY scroll — the form alone, which is the owner's own
       exception: on a 390px screen the alternative is a cramped form, and
       there is no scene below it to scroll past. */
    body { overflow: auto; }
}

/* The rings are decoration, and somebody who asked their system to stop moving
   things must still get a PICTURE rather than a wreck.

   Stopping the animation is not enough, and the first version of this block
   proved it: `rotateX(-12deg)` exists only inside the keyframes, so
   `animation: none` took the ring's tilt away with the motion — the tiles
   collapsed onto one horizontal line, the two at 90° and 270° turned edge-on
   and vanished, and the one at 0° scaled up over the logo. The screenshot
   showed it; the comment that used to be here did not, because it was written
   from the animation having stopped rather than from the image.

   So the resting state is stated: the same tilt, and a yaw that leaves no tile
   edge-on and none of them on the wordmark — one of the arrangements the
   animation itself passes through. */
@media (prefers-reduced-motion: reduce) {
    .cyl { animation: none !important; transform: rotateX(-12deg) rotateY(18deg) scale(var(--ring, 1)); }
    .cyl.rev { transform: rotateX(-12deg) rotateY(-26deg) scale(var(--ring, 1)); }
    .btn { transition: none; }
    .btn:hover { transform: none; }
}