/* AZRION BRAND — FLAGSHIP as the permanent shop top (/).
   v5.3 (2026-10-29): the entrance is ONE UNCUT FILM scrubbed by
   scroll — a single camera flight through the 3D flagship store
   (street -> doors -> interior, dwelling on each of the six
   products -> register counter -> the AZRION BRAND XX logo
   wall), rendered offline from the /flagship/3d/ Three.js space.
   v5.3's render re-hung the garments (sleeves fall; the flat
   product photo no longer floats), rebuilt the town with real
   depth and the interior as one warm boutique room, and slowed
   the camera into true dwells: garment + name/price plate fully
   in frame, with a quiet tappable product chip (real DOM) over
   the dwell.
   v5.3.3 (owner, 2026-10-29 15:47–15:48):
   (1) The 「お会計・商品一覧」 register pill and its sheets are
   REMOVED (their CSS went with them). Chrome is now: ENTER and
   the dwell product chip. The skip button row and the bottom
   dock stay removed.
   (2) The film is /video/entry-flight-v533.mp4 — the v5.3
   frames re-encoded at crf19 (v5.3's crf30 encode crushed the
   picture the owner called unreadable).
   (3) The track is longer (1225svh): the film's scroll span
   grew 760 -> 1040svh so the dwells register, and the last
   85svh of span is the exit.
   (4) THE HANDOFF IS A CURTAIN, not a scroll seam: the top
   page's hero (Aoi) is a sticky layer INSIDE the track, under
   the stage (see the hero rules at the bottom). During the
   exit segment entry.js translates the stage up and off,
   revealing the hero that was behind it all along. The old
   swell-in (hero rising from below) is removed.
   v5.3.4 (owner, 2026-10-29 16:50): (5) a quiet SCROLL cue
   under the ENTER button (the resting first view never said
   scrolling drives the flight); (6) a time-of-day grade —
   one thin warm layer over the film, its tint picked by
   entry.js from the visitor's clock. The film stays a single
   file; the grade adds no data.
   v5.3.5 (owner, 2026-10-29 17:00 — "it scrolls now, but
   it's a little hard to see"): (7) the cue steps up one
   register — a light glass plate (the dwell chip's material),
   a larger, heavier label, a 2px line with a solid segment —
   still small, still the house glide, just unmissable at
   rest; (8) every grade tint thins out (night 0.24 -> 0.13):
   the hour should be felt as light, never as a veil over
   the picture; (9) film and poster take the same whisper of
   contrast/saturation (+3% / +2%) so the low beige scene
   reads with a little more edge — identical on both layers,
   so the poster-to-video handoff cannot pop.
   Palette: white / off-white / ink / warm neutrals only. */

:root {
  --fp-ink: #17171a;
  --fp-ink-soft: #3d3d3d;
  --fp-paper: #f7f7f5;
  --fp-line: rgba(23, 23, 26, 0.14);
  --fp-glass: rgba(250, 250, 250, 0.55);
  --fp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The home <main> must not run the shared viewIn rise (site.css):
   it lifts the whole stage — film and poster together — by 10px
   under the first paint and reads as a hop in the opening frame
   (owner, 2026-10-29 13:28). entry.css is home-only, so turning it
   off here costs the other pages nothing. */
main.view-enter { animation: none; }

/* ---------- track & stage ---------- */
/* v5.2: the track grew 600 -> 760svh (owner: the aisle pass was
   too fast to read the garments). The film is unchanged in length;
   each scroll pixel now advances the playhead less, which also
   lightens the seek pattern — no extra runtime cost. */
/* v5.3.1 (owner screenshot, 2026-10-29 15:15): the track is
   pulled up by the header's height (--hdrH, measured by site.js)
   so the first screen is exactly one viewport: the sticky black
   header band over a full-bleed film frame, from scroll position
   zero — no opening slice that only a scroll can reveal. Before
   this, the in-flow header pushed the 100dvh stage down by its
   own height and the frame's bottom strip sat below the fold. */
/* v5.3.3: the track is 1225svh = 100 (the sticky layers' slot)
   + 1040 (flight scroll) + 85 (curtain exit scroll). The span
   (track height - 100svh) maps: film over the first 1040/1125,
   exit over the last 85/1125 — FLIGHT_SHARE in entry.js must
   match these numbers. */
.fp-track {
  position: relative;
  height: 1225svh;
  margin-top: calc(-1 * var(--hdrH, 0px));
  background: #ececec;
}

.fp-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: #ececec;
  /* Above the hero underlay (z-index 1). The deep soft shadow
     sits outside the stage's bottom edge: invisible while the
     stage fills the screen (it falls below the fold), and it
     becomes the curtain's trailing edge-shadow as the stage
     lifts during the exit. */
  z-index: 2;
  box-shadow: 0 30px 60px rgba(23, 23, 26, 0.28);
}

/* ---------- the film ---------- */
.fp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ececec;
  /* v5.3.10: NO CSS filter on this layer any more. v5.3.5's
     gentle lift (contrast 1.03 / saturate 1.02) is now BAKED
     into the v533f film and poster files themselves (ffmpeg eq,
     verified PSNR >50dB against the filtered original), so the
     picture is unchanged — but a filtered <video> forces every
     presented frame through a full-screen filter pass while
     scrubbing, which is a prime judder source on phones. The
     unfiltered element stays on the hardware video path. */
  user-select: none;
  -webkit-user-drag: none;
}

/* Frame-sequence scrub layer (v5.3.12): a canvas between the
   video and the poster. entry.js paints it with the film's own
   frames as stills (an image swap is a paint, not a seek — see
   the v5.3.12 note in entry.js). It starts transparent, fades
   in on its first real paint (.is-live), and fades back out
   whenever the video layer is showing the fresher frame, so
   the two layers hand the picture back and forth without a
   visible seam (both show the same film, a frame or two apart
   at most, under a short crossfade). object-fit: cover matches
   the video's own framing exactly; no filter, like the video. */
.fp-seq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--fp-ease);
  user-select: none;
  -webkit-user-drag: none;
}
.fp-seq.is-live {
  opacity: 1;
}

/* Poster fallback (owner screenshot, 2026-10-29 15:15): a real
   <img> of frame 0 laid OVER the video. iOS drops the poster
   attribute the moment play() is called (the scrub prime does),
   and until a frame is decoded the video surface paints nothing
   — the stage read as a blank white screen with only the ENTER
   pill. entry.js fades this layer out only when the video proves
   a frame is on screen (loadeddata / seeked with readyState>=2),
   and brings it back if the video errors: loading, stalled or
   failed, the stage never shows blank. */
.fp-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* v5.3.5's whisper of contrast/saturation is baked into the
     v533f poster file itself since v5.3.10 (see .fp-video) —
     no CSS filter here either, so nothing shifts when this
     layer fades out. */
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.5s var(--fp-ease);
}
.fp-poster.is-gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--fp-ease), visibility 0s 0.5s;
}

/* ---------- time-of-day grade (v5.3.4) ---------- */
/* One thin layer over film AND poster (z 3: above the poster,
   below the intro and the chip, so the UI chrome is never
   tinted and its contrast is untouched). The film itself is
   NOT re-rendered per hour — entry.js sets one class from the
   visitor's local time and this layer does the rest:
     morning ( 5–10) soft warm — a breath of amber in the light
     day     (10–17) no class: the film as rendered, neutral
     evening (17–20) amber — the hour the street turns gold
     night   (20– 5) warm dark — a calm shade, NEVER blue
   Every tint is a warm neutral at a low alpha: the storefront
   and the garments stay exactly as readable as at noon, only
   the light around them changes. The 1s background settle is
   the grade arriving, not an effect.
   v5.3.5: all three alphas thinned after the owner's first
   real-device look ("a little hard to see") — night most of
   all (0.24 read as a veil, and the implementer had flagged
   the same worry). The rule now: the tint is LIGHT, not a
   coating — felt at a glance, gone when you look AT the
   picture. */
.fp-grade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: transparent;
  transition: background-color 1s var(--fp-ease);
}
.fp-grade.g-morning { background: rgba(255, 183, 110, 0.06); }
.fp-grade.g-evening { background: rgba(238, 150, 66, 0.08); }
.fp-grade.g-night { background: rgba(26, 19, 12, 0.13); }

/* The skip button row that lived here (v5–v5.2, in flow under
   the entrance) is removed in v5.3 (owner, 2026-10-29 14:18).
   Routes: header, hero CTA, dwell chips. */

/* ---------- intro (ENTER only) ---------- */
.fp-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 24px calc(9svh + env(safe-area-inset-bottom));
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.9s var(--fp-ease), visibility 0.9s;
}
.fp-intro.is-gone { opacity: 0; visibility: hidden; }
.fp-enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 15px 34px 13px;
  border: none;
  border-radius: 999px;
  background: var(--fp-ink);
  color: var(--fp-paper);
  font-size: 17px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 14px 34px rgba(23, 23, 26, 0.28);
}
.fp-enter::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid rgba(23, 23, 26, 0.55);
  opacity: 0;
  pointer-events: none;
}
/* heartbeat ring — frame only, quiet 2.8s rhythm (house language) */
.fp-intro:not(.is-gone) .fp-enter::after { animation: fpHeartbeat 2.8s var(--fp-ease) 1.2s infinite; }
@keyframes fpHeartbeat {
  0% { transform: scale(1, 1); opacity: 0; }
  7% { opacity: 0.75; }
  16% { transform: scale(1.07, 1.2); opacity: 0; }
  24% { opacity: 0; }
  31% { opacity: 0.5; }
  40% { transform: scale(1.05, 1.15); opacity: 0; }
  100% { transform: scale(1.05, 1.15); opacity: 0; }
}

/* ---------- scroll cue (v5.3.4, presence up v5.3.5) ----- */
/* Under the ENTER button, inside the intro stack: a small
   spaced label and a line down which a short segment glides,
   slowly, fading at both ends — the house glide, no bounce,
   no blink. It answers the one question the resting first
   view left open ("how does this move?") without competing
   with ENTER, and it retires the moment the flight starts
   moving (entry.js, filmP > 0.01) instead of waiting for the
   intro's own 0.05 fade — a cue that outstays the first
   scroll has stopped being a cue. Scrolling back to rest
   brings it back with the intro.
   v5.3.5 (owner: "it scrolls now, but it's a little hard to
   see"): v5.3.4's bare 10px label and 1px hairline dissolved
   into the film's striped pavement. The cue now sits on a
   small glass plate — the dwell chip's own material, so the
   scene already speaks this language — with the label a
   step larger and heavier in full ink, the line 2px with a
   near-solid segment. Still plainly the secondary element
   (light glass under ENTER's solid ink), just legible at a
   glance on any frame it rests over. */
.fp-scrollcue {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 11px 17px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  background: var(--fp-glass);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 8px 22px rgba(23, 23, 26, 0.12);
  color: var(--fp-ink);
  transition: opacity 0.6s var(--fp-ease), visibility 0.6s;
}
.fp-scrollcue.is-gone { opacity: 0; visibility: hidden; }
.fp-scrollcue-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
}
.fp-scrollcue-line {
  position: relative;
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background: rgba(23, 23, 26, 0.28);
  overflow: hidden;
}
.fp-scrollcue-seg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 16px;
  border-radius: 2px;
  background: rgba(23, 23, 26, 0.88);
  animation: fpCueDrop 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s infinite;
}
@keyframes fpCueDrop {
  0% { transform: translateY(-18px); opacity: 0; }
  28% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}

/* The register pill (「お会計・商品一覧」, final segment) and the
   register/product sheets it opened are REMOVED in v5.3.3
   (owner, 2026-10-29 15:47: the pill is unnecessary). Their
   styles went with the markup; routes are the header, the hero
   CTA, the dwell chip below, and the shop sections. */

/* ---------- skip (v5.3.10, moved v5.3.11) ---------- */
/* Owner, 2026-10-29 17:53: 「下まで行くのがめんどくさい」 —
   1125svh is a long walk, so a way straight to the top page
   rides the stage (the curtain takes it away with everything
   else and the landed top page carries no trace of it).
   entry.js glides the scroll to the landing position on tap.
   v5.3.11 (owner, 2026-10-29 17:59: 「右上とかに分かりやすい
   ように置いた方がいい」): v5.3.10 put it at the lower-right
   as bare text — too easy to miss. It now sits at the stage's
   UPPER right, just under the sticky header band (the stage's
   top --hdrH strip lives behind that band, so the offset keeps
   it clear of the header's icon row), wearing the dwell chip's
   glass material so the word reads against any film frame.
   Same family as the chip — a quiet pill, not a billboard —
   with a full thumb-sized tap area. Nothing else lives in
   that corner: the intro stack and the chip are both at the
   bottom, the scroll cue retires at the centre. */
.fp-skip {
  position: absolute;
  top: calc(var(--hdrH, 0px) + 10px);
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: var(--fp-glass);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 8px 22px rgba(23, 23, 26, 0.13);
  color: var(--fp-ink);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- product chip (dwell segments only) ---------- */
/* v5.3: while the flight dwells on a garment, this quiet glass
   chip — real DOM over the film — names it and links to its
   product page (the owner's LV-room idea: tap the hanging
   garment, go to the product). It rises a few px and fades in
   with the house ease; it never takes the whole width, never
   blocks the scroll (touch-action: pan-y — a vertical drag that
   starts on the chip scrolls the flight, only a clean tap
   navigates), and it is gone outside the dwell windows, which
   end before the logo finale begins. */
.fp-prodchip {
  position: absolute;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translate(-50%, 10px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 40px);
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: var(--fp-glass);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 26px rgba(23, 23, 26, 0.14);
  color: var(--fp-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: pan-y;
  transition: opacity 0.55s var(--fp-ease), transform 0.55s var(--fp-ease), visibility 0.55s;
}
.fp-prodchip.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.fp-prodchip-text { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.fp-prodchip-name { font-size: 13.5px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; }
.fp-prodchip-price { font-size: 12.5px; color: var(--fp-ink-soft); }
.fp-prodchip-cta {
  flex: none;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--fp-ink);
  color: var(--fp-paper);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* The sheets (product list / register) that the removed pill
   opened are gone in v5.3.3 together with their styles. */

/* ---------- hero: the underlay layer (v5.3.3 curtain) ------- */
/* The top page's hero lives INSIDE the entrance track, as a
   sticky layer in the SAME slot as the stage: its -100dvh top
   margin pulls its flow box up over the stage's, and sticky
   pins it to the viewport top for the whole track, exactly
   where the stage sits — but one layer under (z-index 1 vs
   the stage's 2). It is therefore fully rendered behind the
   film from the first moment: the flight's exit segment lifts
   the stage (entry.js translateY) and the hero is simply
   THERE, the way a stage set is there when the curtain rises.
   When the track ends, both layers unstick together and the
   hero scrolls on as the normal first section of the top —
   the handoff has no seam, no swap, no script trickery.
   Its height becomes the full viewport (site.css gives the
   standalone hero 92svh / max 920px): inside the entrance the
   hero must match the stage's box exactly, or the reveal
   would breathe. The v5.3 swell-in is removed — appearing is
   now the curtain's job. (v5.3.6: the hero's text elements
   carry a small scroll-driven settle as the exit completes —
   entry.js renderSettle; no styles live here.) */
.fp-track > .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  margin-top: -100svh;
  margin-top: -100dvh;
  z-index: 1;
}

/* v5.3.9 (owner device check, 2026-10-29 17:44 — "Aoi's face is
   covered by the black band at the top"): the hero box starts at
   the very top of the viewport (the track pulls itself up by
   --hdrH), and the reel is 9:16, so on phones the cover scale is
   height-driven and object-position has no vertical play — the
   model's head (top ≈2.0% of the frame, chin ≈16%, measured on
   the poster) sat at 11–19px, deep under the ~55px sticky
   header. The media now starts below the header: its box is the
   hero minus the header strip (that strip stays behind the
   sticky header anyway, and the hero's background is the same
   #111113 as the header's — no visible seam), and the vertical
   object-position drops to 5% so the width-driven cases (short
   screens, tablets) keep the head clear as well. Verified
   numerically over a viewport grid in
   render/hero-clearance-v539.js: the head top clears the header
   bottom by ≥4px in every case, and on phones ≥740px tall the
   full body, shoes included, stays in frame — only on short
   screens do the soles trade away, in the zone the CTA and the
   bottom shade already cover. */
.fp-track > .hero .hero-media {
  top: var(--hdrH, 0px);
  bottom: auto;
  height: calc(100% - var(--hdrH, 0px));
  object-position: center 5%;
}

@media (prefers-reduced-motion: reduce) {
  .fp-intro, .fp-prodchip { animation: none; transition: none; }
  .fp-intro:not(.is-gone) .fp-enter::after { animation: none; }
  .fp-grade { transition: none; }
  .fp-scrollcue { transition: none; }
  .fp-scrollcue-seg { animation: none; opacity: 0.8; transform: translateY(12px); }
}