/* The Remembering Gate — an unlisted view with no door but a hand-typed #gate.
   Every selector is scoped to #gate so the trial keeps its own stone-and-torch
   palette without touching the rest of Eden. */

#gate{
  --gate-gold:#d7bb72;
  --gate-cream:#efe5c4;
  --gate-stone:#6f6650;
  --gate-muted:#8e856f;

  padding:clamp(20px,4vw,44px) clamp(12px,3vw,28px);
  border:1px solid rgba(215,187,114,.3);
  border-radius:18px;
  color:var(--gate-cream);
  font-family:Georgia,"Times New Roman",serif;
  text-align:center;
  background:
    radial-gradient(circle at 50% 8%,rgba(33,58,41,.85),transparent 42%),
    linear-gradient(180deg,#0c1b11 0%,#07110b 55%,#061009 100%);
}

#gate .page{width:min(100%,1100px);margin:0 auto}

#gate .gate-back{
  display:inline-block;
  margin-bottom:22px;
  color:var(--gate-gold);
  font-size:.85rem;
  letter-spacing:.08em;
  text-decoration:none;
}
#gate .gate-back:hover{text-decoration:underline}

#gate .gate-mark{
  margin:0;
  color:var(--gate-muted);
  font-size:12px;
  letter-spacing:.25em;
}

#gate h1{
  margin:8px 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,6vw,70px);
  letter-spacing:.06em;
  color:#ead9a6;
  text-shadow:0 4px 16px #000;
}

#gate .gate-subtitle{
  margin:0 auto;
  max-width:640px;
  color:#cbbf9e;
  line-height:1.6;
}

/* The status line is deliberately loud: it is how a tester can tell at a glance
   that the script behind the wheels actually ran. */
#gate .gate-status{
  display:inline-block;
  margin:14px 0 22px;
  padding:6px 11px;
  border:1px solid #665f49;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.12em;
  color:#857d68;
}
#gate .gate-status.ready{
  color:#bfe6bc;
  border-color:#52765a;
  box-shadow:0 0 16px rgba(92,169,105,.2);
}

#gate .gate-frame{
  position:relative;
  /* The pillars below are absolutely positioned against this box and run past
     its rounded corners, so the radius has to do the cutting. */
  overflow:hidden;
  /* The side padding is what keeps the wheels off the pillars: 44px of stone
     either side plus a little air. */
  padding:24px 58px 28px;
  border:5px solid #746b52;
  border-radius:30px;
  background:linear-gradient(#3a3529,#1c1a14);
  box-shadow:0 25px 80px #0009,inset 0 0 50px #0008;
}

/* The two ivy-grown pillars the wheels stand between, cut from the painting of
   the gate at the width they are drawn at so neither is enlarged — a wall
   stretched to fill this box went soft, and stone that has gone soft stops
   reading as stone. Scenery only: the wheels are dragged, and a pillar that
   caught a touch would hold the drum under it still. */
#gate .gate-frame:before,
#gate .gate-frame:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:44px;
  background-size:cover;
  background-position:center;
  pointer-events:none;
}
#gate .gate-frame:before{left:0;background-image:url("gate/pillar-left.webp")}
#gate .gate-frame:after{right:0;background-image:url("gate/pillar-right.webp")}

#gate .gate-kicker{
  margin:0 0 18px;
  font-size:11px;
  letter-spacing:.19em;
  color:#bbb08f;
}

#gate .gate-wheels{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}

#gate .gate-wheel{
  position:relative;
  /* Four and a bit rows of a 137px glyph. Enough drum above and below the
     selector that the two neighbouring faces are both readable, which is what
     tells the eye the wheel turns rather than steps. */
  height:575px;
  border:4px solid var(--gate-stone);
  border-radius:80px;
  overflow:hidden;
  /* Photographed stone first, cylinder shading over the top of it. The crop
     carries the grain; the gradient is what bends the drum away at both sides,
     which no flat piece of wall can do on its own. Darkened hard in the crop
     itself so the bronze linework on the faces still has something to sit
     against. */
  background:
    linear-gradient(90deg,rgba(9,9,7,.93),rgba(9,9,7,.10) 42%,rgba(9,9,7,.10) 58%,rgba(9,9,7,.93)),
    url("gate/drum.webp") center/cover;
  box-shadow:inset 0 0 18px #000a;
  cursor:grab;
  /* The wheels are dragged vertically inside a page that also scrolls, so the
     browser must hand every touch to the wheel rather than to the scroller. */
  touch-action:none;
  user-select:none;
}
/* One crop of stone behind seven wheels reads as seven copies of the same
   wheel. Sliding the drum layer a little further down each one breaks that up
   without a second file. The gradient stays put; only the photograph moves. */
#gate .gate-wheel:nth-child(2){background-position:0 0,50% 14%}
#gate .gate-wheel:nth-child(3){background-position:0 0,50% 29%}
#gate .gate-wheel:nth-child(4){background-position:0 0,50% 43%}
#gate .gate-wheel:nth-child(5){background-position:0 0,50% 58%}
#gate .gate-wheel:nth-child(6){background-position:0 0,50% 72%}
#gate .gate-wheel:nth-child(7){background-position:0 0,50% 87%}
#gate .gate-wheel:active{cursor:grabbing}

/* Stone shadow at both mouths of the wheel, so the glyphs read as turning away
   into the drum rather than stopping at a hard edge. Kept to under a quarter of
   the wheel each: at a third they met in the middle, and the two rows either
   side of the selector — the ones that show the drum is turning, and that the
   glyphs come round again — were buried before they could be seen. */
#gate .gate-wheel:before,
#gate .gate-wheel:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:22%;
  z-index:3;
  pointer-events:none;
}
#gate .gate-wheel:before{top:0;background:linear-gradient(#15140f,rgba(21,20,15,.72),transparent)}
#gate .gate-wheel:after{bottom:0;background:linear-gradient(transparent,rgba(21,20,15,.72),#15140f)}

/* The window the wheel is read through. It sits above the track, so any fill
   here tints the whole face underneath, stone included: kept faint, because it
   is only meant to say where the wheel is read. The light that marks the chosen
   glyph is carried by the glyph itself, below. */
#gate .gate-selector{
  position:absolute;
  left:3px;
  right:3px;
  top:50%;
  height:137px;
  transform:translateY(-50%);
  /* Flat gold on the border alone. A border-box background layer would have
     been the brushed band, but it paints the whole box — including everything
     the padding-box layer above only tints at a tenth — so the gold came
     through the middle as a sheet and buried the face being chosen. The wash
     stays clipped to the padding box, where it still only says where the wheel
     is read; the band's turn is painted as a ring below, where it cannot land
     on the glyph. */
  border:3px solid #c9ad68;
  border-radius:12px;
  background:linear-gradient(rgba(215,187,114,.10),rgba(215,187,114,.03)) padding-box;
  box-shadow:0 0 22px #d7bb7250,inset 0 0 26px #d7bb721c;
  z-index:4;
  pointer-events:none;
}

/* The brushed band, turning along its length the way cast metal does instead of
   sitting at one flat gold. Cut to the ring rather than clipped to a box, so
   nothing of it reaches the window it frames. A border-image would have done
   the same cut but squared off the corner radius; where the cut is unsupported
   the ring simply is not drawn and the flat gold border above stands in. */
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  #gate .gate-selector{border-color:transparent}
  #gate .gate-selector:after{
    content:"";
    position:absolute;
    /* Out to the border box, then back in by the same 3px: what lies between
       the two is exactly the border the ring replaces. */
    inset:-3px;
    padding:3px;
    border-radius:12px;
    background:linear-gradient(160deg,#f2e2ab,#a58c4e 26%,#eddaa0 50%,#7a663a 72%,#d7bb72);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
  }
}

#gate .gate-track{position:absolute;left:0;right:0;top:50%;will-change:transform}

#gate .gate-glyph{
  position:relative;
  /* The row is cut to the proportion the faces are painted at — 200x220, so a
     row as wide as the drum's interior is this tall. A row shorter than that
     let the painting hang out of its own face and over the one below it, and
     the glow layer, which is pinned to the face rather than to the painting,
     could not follow it out. */
  height:137px;
  /* Dimmed enough to sit behind the chosen glyph, not so far that the mark is
     gone: the linework is bronze on dark stone and starts with little contrast
     of its own, so a third of full strength took the unchosen faces below what
     an eye can pick out of the drum. */
  opacity:.55;
  transition:opacity .16s ease,transform .16s ease;
}

/* The faces are painted a little taller than they are wide, on their own carved
   slab. One row is set to the width of the drum's interior and to the height
   that proportion asks for, so a face fills the wheel across and the slab edges
   stack into the seam the painting of the gate shows between one glyph and the
   next. Still fitted rather than filled: `cover` would crop the carved border
   off the slab, which is the part doing that work. Cooled and pushed back until
   the wheel stops on them — with a little contrast added, which separates
   bronze from stone rather than dimming both together the way brightness alone
   did.

   Taken out of flow and pinned to the face. Laid out normally the painting is
   measured before its box is, so a face narrower or wider than the row asked
   for was resized to whatever the painting wanted and the mark below — which is
   pinned, and cannot be talked into moving — was left fitting a different
   rectangle. Both are pinned to the same one now, so `contain` hands them the
   same box and the light lands where the strokes are. */
#gate .gate-glyph img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:6px;
  filter:brightness(.92) contrast(1.08) saturate(.9);
  transition:filter .16s ease;
  pointer-events:none;
}
#gate .gate-glyph.active{
  opacity:1;
  /* One row is exactly one glyph tall, so a face much larger than this starts
     climbing over its neighbours and crowding the selector borders. */
  transform:scale(1.08);
}
/* The selected face is lit twice over. This is the part that lands on the whole
   tile — brightness, colour and a shadow that lifts it off the drum — and it
   carries the selection on its own wherever the masked layer below cannot be
   drawn. The masked layer then adds the light that falls on the mark alone. */
#gate .gate-glyph.active img{
  filter:brightness(1.3) contrast(1.18) saturate(1.15) drop-shadow(0 0 10px #d7bb72aa) drop-shadow(0 3px 8px #000a);
}
#gate .gate-glyph.glow img{
  filter:brightness(1.3) contrast(1.18) saturate(1.12) drop-shadow(0 0 12px #8fe19e) drop-shadow(0 0 26px #68b87a);
}

/* Lighting the mark itself.

   The files in glyphs/ are opaque JPEGs — linework painted on dark stone — so a
   filter or a shadow on the img has no way to tell mark from background and
   lights the whole rectangle. What separates the two is brightness, so the
   painting is reused as its own luminance mask: a copy of it is laid over the
   face and cut to its bright pixels, leaving most of the stone behind.

   The copy is brightened rather than replaced by a flat colour so each mark
   lights in its own hue. All twenty-four are carved in the same bronze now, so
   a gold fill would not be far wrong — but brightening what is already there
   keeps the tarnish and the moss in the strokes, which a flat fill scrubs off.

   One mask, not two. Stacking the mask against itself with `intersect`
   multiplies the two, which does scrub the stone speckle — but the bronze
   linework is painted around a fifth to a half of full brightness, and squaring
   drops that to a few percent along with it. Almost nothing survived but the
   brightest specular pixels, which is why the lit layer could not be seen. A
   single mask keeps the strokes mostly opaque; the stone comes through at
   around a tenth, which reads as the mark spilling a little light onto the tile
   it is carved into.

   Guarded because a browser without luminance masking treats a JPEG as an alpha
   mask, and a JPEG has no alpha: every pixel would be opaque and the layer would
   paint as a solid block over the artwork. Where the guard fails the span below
   stays empty and invisible, which leaves the lit face above. */
#gate .gate-lit{
  position:absolute;
  /* The same box the img is pinned to, so `contain` letterboxes the mask inside
     it exactly the way object-fit letterboxes the painting. Both are laid
     against .gate-glyph rather than measured from their own contents, which is
     what keeps a mark of any proportion registered to the face it is cut from;
     both sit inside it, so the scale on the selected face carries them
     together. */
  inset:0;
  opacity:0;
  transition:opacity .16s ease;
  pointer-events:none;
}
@supports (mask-mode:luminance){
  #gate .gate-lit:after{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--glyph);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    /* The copy only shows through where the mask keeps it, so the number here
       has to cover the whole distance the mark is meant to travel. At the
       strokes it lands nearly in full and the bronze goes to torchlight; at the
       stone the mask holds it to a tenth and it barely registers. Brightness has
       no reach beyond the pixel it lands on, so it is unaffected by running
       before the mask — unlike the glow on the parent. */
    filter:brightness(1.8) saturate(1.1);
    mask-image:var(--glyph);
    mask-mode:luminance;
    mask-size:contain;
    mask-position:center;
    mask-repeat:no-repeat;
  }
  /* Unlike a shadow on the opaque img, this is traced from the masked layer, so
     the halo follows the strokes of the glyph rather than the edge of its tile.
     It stays gold, the light the rest of the gate is lit by. */
  #gate .gate-glyph.active .gate-lit{
    opacity:1;
    filter:drop-shadow(0 0 6px #d7bb72cc) drop-shadow(0 0 16px #d7bb7266);
  }
  /* The win-state flare stays green so the answer opening still reads as a
     change against the gold of an ordinary selected glyph. */
  #gate .gate-glyph.glow .gate-lit{
    opacity:1;
    filter:drop-shadow(0 0 6px #8fe19e) drop-shadow(0 0 18px #68b87a);
  }
}

#gate .gate-button{
  margin-top:25px;
  padding:16px 36px;
  border:2px solid #91825c;
  border-radius:7px;
  background:linear-gradient(#514936,#2a271e);
  color:#eedba4;
  font:700 16px Georgia,"Times New Roman",serif;
  letter-spacing:.18em;
  cursor:pointer;
}
#gate .gate-button:hover{filter:brightness(1.08)}

#gate .gate-msg{
  display:none;
  margin:18px auto 0;
  max-width:600px;
  padding:13px 18px;
  border:1px solid #746b52;
  border-radius:9px;
  background:#171710cc;
  color:#e7d7ab;
  font-style:italic;
}
#gate .gate-msg.show{display:block;animation:gate-fade .25s ease}

#gate .gate-instructions{margin-top:18px;color:#786f5c;font-size:12px}

#gate .gate-frame.shake{animation:gate-shake .5s ease}

/* ---- The opening film ------------------------------------------------------

   What the Garden says before the trial is shown, over the whole window, every
   time the gate is opened. The film itself is Vimeo's player in an iframe, so
   nothing here can reach inside it: the poster below is our own, laid over the
   stage, and pressing it is what hands the player its address with the sound
   already on. Once it is playing the poster is taken away and the film has the
   stage to itself.

   Nothing on this screen moves until it is pressed, which is why there is no
   reduced-motion case for it further down — a visitor who asked for stillness
   is shown a still poster and chooses the film or SKIP like anyone else. */
#gate .gate-intro{
  /* A phone's address bar eats into vh, and the film is measured against the
     window height below. dvh is the honest number where it is understood. */
  --intro-h:100vh;
  position:fixed;
  inset:0;
  /* Over the opening scene, which sits at 100. The two never share the screen —
     the film is finished with long before a wheel can be turned — but the film
     is the thing that must be on top whenever both are in the page. */
  z-index:120;
  display:none;
  place-items:center;
  background:#030706;
}
@supports(height:100dvh){#gate .gate-intro{--intro-h:100dvh}}
#gate .gate-intro.show{display:grid}

/* The film stands taller than it is wide — 1080 by 1920 — so the stage is cut
   to that shape and the window is left black around it. Cropping it to fill a
   desktop instead would throw away most of the frame. */
#gate .gate-intro-stage{
  position:relative;
  width:min(100vw,calc(var(--intro-h) * 9 / 16));
  height:min(var(--intro-h),calc(100vw * 16 / 9));
  background:#000;
}
#gate .gate-intro-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

#gate .gate-intro-poster{
  position:absolute;
  inset:0;
  z-index:10;
  display:grid;
  place-content:center;
  gap:12px;
  padding:24px;
  text-align:center;
  background:radial-gradient(circle at 50% 38%,rgba(24,52,31,.92),#07110b 60%,#030706 100%);
}
#gate .gate-intro.playing .gate-intro-poster{display:none}

#gate .gate-intro-kicker{margin:0;color:var(--gate-muted);font-size:12px;letter-spacing:.25em}
#gate .gate-intro-poster h2{
  margin:0;
  font-family:Cinzel,Georgia,"Times New Roman",serif;
  font-size:clamp(1.15rem,4.4vw,1.85rem);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--gate-cream);
}
#gate .gate-intro-line{margin:0 auto;max-width:32ch;color:var(--gate-muted);font-size:.92rem;line-height:1.6}
#gate .gate-intro-begin{margin-top:14px;justify-self:center;font-size:15px}

/* The quiet way in, for anyone who cannot have the sound where they are. Kept
   plain and small: the film is meant to be heard, and this is the exception. */
#gate .gate-intro-silent{
  justify-self:center;
  margin:0;
  padding:6px 10px;
  border:0;
  background:none;
  color:var(--gate-muted);
  font:13px Georgia,"Times New Roman",serif;
  text-decoration:underline;
  cursor:pointer;
}
#gate .gate-intro-silent:hover{color:var(--gate-cream)}

/* ---- The opening ----------------------------------------------------------

   What the Garden does when the seven truths are remembered: the vines that
   grew over the gate let go, two stone doors part on a shaft of light, and the
   way beyond is left standing open. This replaces the single portal card the
   trial used to end on, and is fixed to the window for the same reason that
   was — the hidden view is what keeps it off every other page.

   The whole scene is driven by classes gate.js sets on the overlay in order:
   vines-away, open, reveal, copy-away, chamber. Every animation below is
   written `forwards`, so each step stays where it landed rather than snapping
   back while the next one is waited for. That is also what makes SKIP work,
   further down. */
#gate .gate-cinematic{
  position:fixed;
  /* A hair larger than the window. The quake below shakes the whole overlay,
     and at inset:0 that walks the page behind it into view at the edges. */
  inset:-12px;
  z-index:100;
  display:none;
  overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#18341f 0,#07110b 55%,#030706 100%);
}
#gate .gate-cinematic.show{display:block}

/* Vignette, over everything including the chamber, so the scene reads as
   something being looked into rather than a page being shown. */
#gate .gate-cinematic:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  box-shadow:inset 0 0 190px rgba(0,0,0,.92);
}

/* The stone taking its first move, felt rather than seen. On the overlay and
   not on the body: a transform on an ancestor makes it the containing block for
   anything fixed inside it, which would tear this scene off the window. */
#gate .gate-cinematic.quake{animation:cin-quake .75s ease}
@keyframes cin-quake{
  0%,100%{transform:none}
  12%{transform:translate(-4px,2px)}
  24%{transform:translate(5px,-2px)}
  36%{transform:translate(-3px,1px)}
  50%{transform:translate(3px,-1px)}
  65%{transform:translate(-2px,1px)}
}

/* Ground mist. Two of them, drifting against each other on different clocks so
   the floor never settles into a loop the eye can count. */
#gate .cin-fog{
  position:absolute;
  z-index:0;
  width:75vw;
  height:36vh;
  border-radius:50%;
  filter:blur(42px);
  opacity:.12;
  background:radial-gradient(ellipse,rgba(210,235,214,.45),transparent 68%);
}
#gate .fog-a{left:-15vw;bottom:-8vh;animation:cin-fog-a 9s ease-in-out infinite alternate}
#gate .fog-b{right:-18vw;bottom:4vh;animation:cin-fog-b 11s ease-in-out infinite alternate}
@keyframes cin-fog-a{to{transform:translateX(10vw) translateY(-2vh)}}
@keyframes cin-fog-b{to{transform:translateX(-12vw) translateY(1vh)}}

/* The vines that have held the gate shut. Painted rather than drawn: a stem in
   a linear gradient with leaves dropped on it as radial ones, which costs no
   image and scales to any window. They sit above the doors because they grew
   over them, and they are the first thing to move. */
#gate .cin-vine{
  position:absolute;
  z-index:8;
  top:-8vh;
  width:8vw;
  min-width:48px;
  height:116vh;
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 10%,#5e8d5c 0 7px,transparent 8px),
    radial-gradient(circle at 58% 27%,#4e7d50 0 8px,transparent 9px),
    radial-gradient(circle at 36% 48%,#6c9a69 0 7px,transparent 8px),
    radial-gradient(circle at 62% 69%,#47724a 0 8px,transparent 9px),
    linear-gradient(90deg,transparent 42%,#315c39 43% 52%,#18311f 53% 62%,transparent 63%);
  filter:drop-shadow(0 6px 10px #0008);
  transform-origin:top center;
}
#gate .vine-l{left:8vw;transform:rotate(-4deg)}
#gate .vine-r{right:8vw;transform:rotate(4deg)}
#gate .cin-vine.v2{left:17vw;opacity:.72;transform:rotate(5deg) scale(.78)}
#gate .cin-vine.v4{right:17vw;opacity:.72;transform:rotate(-5deg) scale(.78)}
/* The pair set back let go a beat later, so the tangle comes apart rather than
   all of it lifting at once. */
#gate .gate-cinematic.vines-away .v1{animation:cin-vine-left 1.8s ease forwards}
#gate .gate-cinematic.vines-away .v2{animation:cin-vine-left-2 1.8s .12s ease forwards}
#gate .gate-cinematic.vines-away .v3{animation:cin-vine-right 1.8s ease forwards}
#gate .gate-cinematic.vines-away .v4{animation:cin-vine-right-2 1.8s .12s ease forwards}
@keyframes cin-vine-left{to{transform:translateX(-26vw) rotate(-24deg);opacity:.06}}
@keyframes cin-vine-left-2{to{transform:translateX(-22vw) rotate(-15deg) scale(.78);opacity:.03}}
@keyframes cin-vine-right{to{transform:translateX(26vw) rotate(24deg);opacity:.06}}
@keyframes cin-vine-right-2{to{transform:translateX(22vw) rotate(15deg) scale(.78);opacity:.03}}

/* The light behind the doors. It is already there before they move — a seam of
   it shows the moment they part — and it widens to fill the window as they go. */
#gate .cin-light{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:4px;
  transform:translateX(-50%);
  background:#ecffed;
  box-shadow:0 0 40px #b4ffbe,0 0 120px #65c97c,0 0 230px #4db969;
  opacity:0;
  z-index:1;
}
#gate .gate-cinematic.open .cin-light{animation:cin-light 3.7s ease forwards}
@keyframes cin-light{
  0%{opacity:0;width:4px}
  28%{opacity:.92;width:16px}
  65%{opacity:1;width:18vw}
  100%{opacity:1;width:86vw}
}

/* The doors. Slightly over half the window each so the seam is covered while
   they are shut, with the grain of the stone in a repeating gradient and a ring
   cut into each face that the two halves complete between them. */
#gate .cin-door{
  position:absolute;
  top:0;
  bottom:0;
  width:50.5%;
  z-index:5;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.03),transparent 25%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 11px),
    linear-gradient(#494437,#2c2921);
  box-shadow:inset 0 0 95px #000d;
  border:8px solid #6d654f;
}
#gate .cin-door:before{
  content:"";
  position:absolute;
  inset:7%;
  border:3px double rgba(215,187,114,.24);
  border-radius:22px;
}
#gate .cin-door:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:30%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:3px solid rgba(215,187,114,.28);
  box-shadow:inset 0 0 35px #0008,0 0 22px rgba(215,187,114,.10);
}
#gate .cin-left{left:0;border-right:5px solid #8b805f}
#gate .cin-right{right:0;border-left:5px solid #8b805f}
/* Slow to start and slow to stop, the way something that heavy would move. */
#gate .gate-cinematic.open .cin-left{animation:cin-door-left 3.7s cubic-bezier(.52,.02,.22,1) forwards}
#gate .gate-cinematic.open .cin-right{animation:cin-door-right 3.7s cubic-bezier(.52,.02,.22,1) forwards}
@keyframes cin-door-left{to{transform:translateX(-98%)}}
@keyframes cin-door-right{to{transform:translateX(98%)}}

/* Dust shaken loose. Every shard is given its own drift, spin, size and clock
   by gate.js, so no two falls read the same. */
#gate .cin-debris{position:absolute;inset:0;z-index:12;pointer-events:none}
#gate .cin-debris i{
  position:absolute;
  display:block;
  border-radius:40%;
  background:#83765b;
  opacity:.8;
  box-shadow:0 1px 2px #000;
  animation:cin-debris-fall var(--dur) cubic-bezier(.2,.5,.4,1) forwards;
}
@keyframes cin-debris-fall{
  0%{transform:translate(0,-10px) rotate(0deg);opacity:0}
  12%{opacity:.9}
  100%{transform:translate(var(--dx),105vh) rotate(var(--rot));opacity:.12}
}

/* What the Garden says, once there is light enough to read it by. */
#gate .cin-copy{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-46%);
  width:min(880px,90vw);
  text-align:center;
  z-index:15;
  opacity:0;
}
#gate .gate-cinematic.reveal .cin-copy{animation:cin-copy-in 1.6s ease forwards}
@keyframes cin-copy-in{
  to{opacity:1;transform:translate(-50%,-50%)}
}
/* Both ends are written out rather than left implicit. This rule replaces the
   one above, which takes its finished state with it, so a keyframe list that
   only named its `to` would have faded from the nothing the copy starts at. */
#gate .gate-cinematic.copy-away .cin-copy{animation:cin-copy-away 1.1s ease forwards}
@keyframes cin-copy-away{
  from{opacity:1;transform:translate(-50%,-50%)}
  to{opacity:0;transform:translate(-50%,-54%)}
}
#gate .cin-copy h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(40px,7vw,82px);
  color:#f2e7bd;
  text-shadow:0 0 30px rgba(139,224,157,.45),0 5px 20px #000;
}
#gate .cin-copy p{font-size:clamp(17px,2.2vw,23px);color:#ded7be}

/* The way beyond. Held at zero until the copy has gone, then brought up
   underneath it — the doors and the light are still there behind this, which is
   what keeps the chamber feeling like somewhere the gate led to. */
#gate .hidden-chamber{
  position:absolute;
  inset:0;
  z-index:10;
  opacity:0;
  pointer-events:none;
  display:grid;
  place-items:center;
  padding:30px;
  overflow-y:auto;
  background:
    radial-gradient(circle at 50% 35%,rgba(117,213,137,.17),transparent 24%),
    radial-gradient(circle at 50% 60%,rgba(226,204,130,.08),transparent 32%),
    linear-gradient(#0b1710,#07100b);
}
#gate .gate-cinematic.chamber .hidden-chamber{
  animation:cin-chamber-in 1.8s ease forwards;
  pointer-events:auto;
}
@keyframes cin-chamber-in{to{opacity:1}}
#gate .chamber-arch{
  position:absolute;
  width:min(900px,88vw);
  height:min(760px,86vh);
  border:10px solid #514a39;
  border-bottom:none;
  border-radius:48% 48% 0 0;
  box-shadow:inset 0 0 70px #000b,0 0 45px rgba(88,164,100,.12);
  opacity:.85;
}
#gate .chamber-glow{
  position:absolute;
  width:min(580px,72vw);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#d7ffd9 0,rgba(113,210,132,.32) 22%,transparent 68%);
  filter:blur(10px);
  opacity:.18;
  animation:cin-breathe 3.2s ease-in-out infinite alternate;
}
@keyframes cin-breathe{to{opacity:.32;transform:scale(1.07)}}
#gate .chamber-content{position:relative;z-index:3;width:min(760px,88vw);text-align:center}
#gate .chamber-kicker{margin:0 0 10px;font-size:12px;letter-spacing:.24em;color:#a99c7d}
#gate .chamber-content h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(38px,6vw,74px);
  color:#f0e5bd;
  text-shadow:0 0 28px rgba(132,220,150,.32);
}
#gate .chamber-line{color:#d5ceb4;font-size:clamp(16px,2vw,21px)}
#gate .relic-wrap{
  margin:26px auto 16px;
  width:min(520px,90%);
  padding:22px;
  border-top:1px solid rgba(215,187,114,.36);
  border-bottom:1px solid rgba(215,187,114,.36);
}
#gate .relic-seal{
  width:72px;
  height:72px;
  margin:0 auto 12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px solid #9b885e;
  background:#18251a;
  color:#e9d79d;
  font-size:34px;
  box-shadow:0 0 24px rgba(116,203,132,.15);
}
#gate .relic-title{font-size:18px;letter-spacing:.12em;color:#e7d6a6}
#gate .relic-copy{margin-top:7px;color:#afa68f;font-size:14px}
#gate .reward-panel{
  margin:20px auto 0;
  width:min(620px,92%);
  padding:22px;
  border:1px solid rgba(215,187,114,.32);
  border-radius:14px;
  background:rgba(13,24,16,.72);
  box-shadow:inset 0 0 30px rgba(0,0,0,.45);
}
#gate .reward-label{font-size:11px;letter-spacing:.22em;color:#9b8e70}
#gate .reward-title{margin-top:7px;font-size:clamp(20px,3vw,30px);color:#e9d9aa}
#gate .reward-copy{margin:10px auto 16px;max-width:520px;color:#bdb49a;line-height:1.5}
#gate .continue-btn{
  margin:0;
  padding:12px 20px;
  border:1px solid #8d805d;
  border-radius:7px;
  background:linear-gradient(#4b4433,#29271f);
  color:#e9d7a3;
  font:700 13px Georgia,"Times New Roman",serif;
  letter-spacing:.14em;
  cursor:pointer;
}
#gate .continue-btn:hover{filter:brightness(1.08)}
/* The way back. The scene covers the whole window, so without this the only way
   out of the chamber is the browser's own back button. */
#gate .cin-close{
  margin:22px auto 0;
  padding:8px 14px;
  border:1px solid rgba(215,187,114,.28);
  border-radius:6px;
  background:transparent;
  color:#9b917a;
  font:12px Georgia,"Times New Roman",serif;
  letter-spacing:.1em;
  cursor:pointer;
}
#gate .cin-close:hover{color:#d7bb72;border-color:rgba(215,187,114,.5)}

#gate .cin-skip,
#gate .cin-sound{
  position:absolute;
  bottom:16px;
  z-index:30;
  margin:0;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  background:#0008;
  color:#d9d4c3;
  font:12px Georgia,"Times New Roman",serif;
  cursor:pointer;
}
#gate .cin-skip{right:16px}
/* The Terminal makes no sound anywhere else, so the way to stop it has to be on
   screen from the first note rather than somewhere in a settings panel. */
#gate .cin-sound{left:16px}
#gate .gate-cinematic.chamber .cin-skip{display:none}

/* SKIP. Every animation in the scene is written `forwards`, so collapsing the
   durations lands each one on its own finished state within a frame — the doors
   are simply already open. Removing the animations instead would drop the scene
   back to where it started. The chamber's breath is left at its own length,
   being the one loop still running once the skip is over. */
#gate .gate-cinematic.cin-instant *{animation-duration:.001s!important;animation-delay:0s!important}
#gate .gate-cinematic.cin-instant .chamber-glow{animation-duration:3.2s!important}

/* The frame the wheels sit in, catching the light a beat before the scene. */
#gate .gate-frame.cinematic-ready{animation:cin-gate-glow 2.6s ease forwards}
@keyframes cin-gate-glow{
  to{box-shadow:0 25px 90px rgba(80,176,101,.35),inset 0 0 110px rgba(97,204,120,.22)}
}

/* Someone who has asked their browser for less movement is shown the same
   scene, arrived at rather than travelled through: gate.js skips the quake and
   the falling dust, and everything that would have animated is already where it
   ends up. The chamber is left holding still rather than breathing. */
@media(prefers-reduced-motion:reduce){
  #gate .gate-cinematic *{animation-duration:.001s!important;animation-delay:0s!important}
  #gate .gate-cinematic .chamber-glow{animation:none;opacity:.28}
  #gate .gate-cinematic.quake{animation:none}
  #gate .gate-frame.cinematic-ready{animation:none}
}

@keyframes gate-fade{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
@keyframes gate-shake{
  0%,100%{transform:none}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
}

@media(max-width:760px){
  #gate{padding-inline:6px}
  #gate .gate-frame{padding:18px 5px 23px;border-width:3px}
  /* Seven wheels already leave a phone with barely forty pixels each. Two
     pillars would come out of that width, and a wheel narrow enough to hide
     the carving is a worse trade than a frame without them, so the stone here
     is the drum's alone. */
  #gate .gate-frame:before,
  #gate .gate-frame:after{display:none}
  #gate .gate-wheels{gap:3px}
  #gate .gate-wheel{height:258px;border-width:3px;border-radius:46px}
  /* Seven wheels across a phone leave each one around forty pixels wide, and
     the rows keep the painting's proportion the way they do on a desktop, so
     they shorten with them and the slab stays whole. glyphHeight() in gate.js
     reads the same breakpoint and must move with these numbers. The img and the
     lit layer are both pinned to the face, so neither needs a word here — they
     take the new row as they take the old one. */
  #gate .gate-glyph{height:47px}
  /* The wheel clips what overflows it, and a phone glyph already fills its row,
     so the selected face grows less here than on a desktop. */
  #gate .gate-glyph.active{transform:scale(1.04)}
  #gate .gate-selector{height:47px;border-radius:8px;border-width:2px}
  /* The ring stands in for the border, so it thins with it. */
  #gate .gate-selector:after{inset:-2px;padding:2px;border-radius:8px}

  /* Seven wheels' worth of stone becomes a phone-width scene: the vines pull in
     from the sides they would otherwise cover the doors from, and the chamber
     gets its own room to scroll in rather than running off the bottom. */
  #gate .vine-l{left:2vw}
  #gate .vine-r{right:2vw}
  #gate .cin-vine.v2{left:11vw;opacity:.55}
  #gate .cin-vine.v4{right:11vw;opacity:.55}
  #gate .hidden-chamber{padding:56px 16px 72px;place-items:start center}
  #gate .relic-wrap{margin-top:18px;padding:16px}
  #gate .reward-panel{padding:16px}
  #gate .cin-skip,#gate .cin-sound{bottom:10px;padding:7px 9px;font-size:11px}
  #gate .cin-skip{right:10px}
  #gate .cin-sound{left:10px}
}