/* =====================================================================
   GLIQ hero
   Reference stage: 1536 x 1024. Every coordinate below is measured from
   the source comp (ink bounding boxes, not line boxes), then the whole
   stage is uniformly scaled to cover the viewport.
   ===================================================================== */
:root{
  --vpx: 975px;   /* vanishing point of the light trails */
  --vpy: 578px;
  --ink:#fff;
}
html,body{background:#011126;overflow-x:hidden}
body{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}

/* Hero is now the first screen of a scrolling page (was position:fixed). */
#viewport{position:relative;width:100%;height:100vh;overflow:hidden}
/* luxy inertia-scroll wrapper; luxy sets position:fixed and translates it */
#luxy{position:relative;width:100%;will-change:transform}
#stage{position:absolute;top:0;left:0;width:1536px;height:1024px;transform-origin:0 0;color:var(--ink)}

/* ---------------- fixed video background (hero → introduction) ----------------
   The hero video is pulled OUT of the scrolling content into a position:fixed
   layer so it can carry through into the INTRODUCTION section. A GSAP
   ScrollTrigger scrubs it from the hero composition (right-of-headline oval)
   into a full-bleed ambient backdrop as the first screen is scrolled. */
#videobg{position:fixed;inset:0;overflow:hidden;z-index:0;background:#011126;pointer-events:none}
.bg-morph{position:absolute;inset:0;will-change:transform}
/* .bg-wrap keeps the 1536 reference sizing; JS scales it to COVER the viewport
   (identity at the reference 1536x1024). */
.bg-wrap{position:absolute;top:0;left:0;width:1536px;height:1024px;transform-origin:0 0;
  background:#011126}
/* 8x looping video: bright convergence at comp ~(1075,505), edges feathered to
   black with a radial mask so it melts into the dark background. */
.bg{
  position:absolute;top:505px;left:1075px;width:1240px;height:1060px;
  transform:translate(-50%,-50%);transform-origin:center;
  object-fit:cover;filter:brightness(.9) saturate(1.05);
  will-change:transform;
  -webkit-mask-image:radial-gradient(ellipse 56% 60% at 52% 50%, #000 26%, rgba(0,0,0,.55) 58%, transparent 80%);
          mask-image:radial-gradient(ellipse 56% 60% at 52% 50%, #000 26%, rgba(0,0,0,.55) 58%, transparent 80%);
  animation:dolly 30s ease-in-out infinite alternate;
}
@keyframes dolly{from{transform:translate(-50%,-50%) scale(1.01)}to{transform:translate(-50%,-50%) scale(1.07)}}

/* lift the video's dark areas to the background navy (screen blend: black →
   #011126, highlights stay bright) so the video melts into the background and
   only the light-trails read. Over the video, under the dot-screen mesh. */
.bg-tint{position:absolute;inset:0;background:#011126;mix-blend-mode:screen;pointer-events:none}

/* 網かけ: a fine dark dot-screen to hide the video's compression coarseness. */
.hero-mesh{position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    radial-gradient(rgba(0,0,0,.34) 0.7px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  background-size:3px 3px, 100% 3px;
  mix-blend-mode:multiply;opacity:.9}
/* two viewport-level scrims crossfade with scroll:
   .vbg-hero keeps the headline area dark (hero); .vbg-intro darkens the whole
   frame into an ambient backdrop (introduction). */
.vbg-scrim{position:absolute;inset:0;pointer-events:none;z-index:3}
.vbg-hero{background:
  linear-gradient(90deg, rgba(2,4,10,.86) 0%, rgba(2,4,10,.6) 22%, rgba(2,4,10,.2) 44%, transparent 62%),
  radial-gradient(120% 120% at 68% 50%, transparent 46%, rgba(2,4,10,.55) 78%, rgba(2,4,10,.92) 100%),
  linear-gradient(180deg, rgba(2,4,10,.55) 0%, transparent 22%, transparent 66%, rgba(2,4,10,.6) 100%)}
.vbg-intro{opacity:0;background:
  radial-gradient(120% 92% at 50% 44%, rgba(4,6,12,.28) 0%, rgba(4,6,12,.7) 58%, rgba(3,4,9,.95) 100%),
  linear-gradient(180deg, rgba(3,4,9,.72) 0%, rgba(4,6,12,.3) 24%, rgba(4,6,12,.3) 72%, rgba(3,4,9,.82) 100%)}

/* ---------------- type systems ---------------- */
.lat{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400}
.jp{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif}

/* Absolutely placed ink blocks. `left`/`top` are the measured ink origin;
   --dx/--dy absorb the font's side bearing and ascent. */
.at{position:absolute;white-space:nowrap;line-height:1;transform-origin:0 0;
    transform:translate(var(--dx,0px),var(--dy,0px)) scaleX(var(--sx,1))}

/* ---------------- fixed site header ----------------
   Sits OUTSIDE the luxy wrapper so it stays pinned while the content scrolls
   underneath. Constant appearance — fixed from the start, no on-scroll
   condense or scrim. */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(20px,4.4vw,64px)}

.sh-logo{display:block;line-height:0;transition:opacity .35s ease}
.sh-logo img{display:block;width:150px;height:auto}
.sh-logo:hover{opacity:.7}

.sh-nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,40px)}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.5vw,36px)}
.nav-links a{position:relative;color:#fff;text-decoration:none;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;
  font-size:15px;letter-spacing:.02em;line-height:1;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* CONTACT pill — fill hover sweeps left → right */
.sh-contact{position:relative;display:flex;align-items:center;gap:20px;
  height:48px;padding:0 24px;border:1px solid #fff;color:#fff;text-decoration:none;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;
  letter-spacing:.12em;overflow:hidden;transition:color .3s ease}
.sh-contact>*{position:relative;z-index:1}
.sh-contact::before{content:"";position:absolute;inset:-1px;background:#fff;
  transform:scaleX(0);transform-origin:right;
  transition:transform .6s cubic-bezier(.15,1,.7,1)}
.sh-contact:hover{color:#000}
.sh-contact:hover::before{transform:scaleX(1);transform-origin:left;
  transition:transform .66s cubic-bezier(.1,1,.7,1)}
.sh-contact .arw2{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sh-contact:hover .arw2{transform:translateX(5px)}

@media (max-width:820px){
  .nav-links{display:none}
  .site-header{padding:16px 20px}
  .sh-contact{height:39px;padding:0 16px;gap:12px;font-size:14px}
}

/* purple accent circle straddling the top-left corner of a letter (logo purple):
   the "B" of BUILD FIRST (hero) and the "I" of INTRODUCTION. It enters by
   DRAWING its outline (stroke-dashoffset), then filling in. */
.hero-orb{position:absolute;left:82.5px;top:176.5px;width:89px;height:89px;
  z-index:0;pointer-events:none;overflow:visible}
/* .orb-anchor shrink-wraps the centred INTRODUCTION text so the orb can be
   pinned to the "I"; the orb sits OUTSIDE the clip mask (which would crop it).
   #introStage carries a transform, so z-index:-1 stays inside it (behind the
   text, above the video), never escaping the section. */
.orb-anchor{position:relative;display:inline-block;vertical-align:top}
.intro-orb{position:absolute;left:-26px;top:-12px;width:54px;height:54px;
  z-index:-1;pointer-events:none;overflow:visible}
.orb-ring{fill:none;stroke:#4b62ad;stroke-linecap:round;
  transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
.hero-orb  .orb-ring{stroke-width:2.5;stroke-dasharray:271;stroke-dashoffset:271} /* r=43 → C≈270 */
.intro-orb .orb-ring{stroke-width:2;stroke-dasharray:164;stroke-dashoffset:164}   /* r=26 → C≈163 */
.orb-fill{opacity:0}
/* hero orb draws with the page entrance; the intro orb draws when the heading reveals */
.ready .hero-orb .orb-ring{animation:orbDraw .6s cubic-bezier(.16,1,.3,1) .2s both}
.ready .hero-orb .orb-fill{animation:orbFill .45s ease .8s both}
.intro-h.shown .orb-ring{animation:orbDraw .6s cubic-bezier(.16,1,.3,1) .12s both}
.intro-h.shown .orb-fill{animation:orbFill .45s ease .68s both}
@keyframes orbDraw{to{stroke-dashoffset:0}}
@keyframes orbFill{to{opacity:1}}
.freeze .orb-ring{stroke-dashoffset:0;animation:none}
.freeze .orb-fill{opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){
  .orb-ring{stroke-dashoffset:0;animation:none}
  .orb-fill{opacity:1;animation:none}
}

/* ---------------- headline ---------------- */
.h1{position:absolute;z-index:2;font-family:"DIN Condensed","Oswald","PT Sans Narrow","Arial Narrow",sans-serif;
    font-weight:400;line-height:1;white-space:nowrap;transform-origin:0 0}
.h1 .clip{display:block;overflow:hidden}
.h1 .clip i{display:block;font-style:normal}
.l1{left:127px;top:221px;font-size:204.2px;--dx:-9px;--dy:0px;transform:translate(var(--dx),var(--dy)) scaleX(var(--sx,.9016))}
.l2{left:127px;top:396px;font-size:201.4px;--dx:-9px;--dy:0px;transform:translate(var(--dx),var(--dy)) scaleX(var(--sx,.9367))}

/* ---------------- copy ---------------- */
.lede{left:128px;top:584px;z-index:2;font-size:26px;font-weight:600;letter-spacing:.086px;--dx:-2px;--dy:-2px}
.body p{position:absolute;z-index:2;font-size:15px;font-weight:300;line-height:1;white-space:nowrap;
        transform-origin:0 0;transform:translate(var(--dx,-1px),var(--dy,0px)) scaleX(var(--sx,1))}
.b1{left:127px;top:660px}.b2{left:127px;top:690px}.b3{left:127px;top:720px}.b4{left:127px;top:750px}

/* ---------------- hero photo orbit ----------------
   Portrait photos orbiting a TILTED axis on the right of the MV, big enough to
   graze the headline. JS places every card each frame (rotateY + translateZ),
   and the ring itself is tipped (rotateZ/rotateX) so the photos swing through on
   a diagonal — dynamic, not a flat upright carousel. No frames or overlays: the
   photos read as raw prints, depth comes purely from perspective + opacity. The
   transform on .hg-card is a STATIC fallback fan (via --i) if JS never runs.
   Reference stage coordinates (1536x1024); the whole thing scales with #stage. */
/* pushed right — the ring runs off the right edge of the screen on purpose;
   #viewport clips whatever spills over. z-index sits BELOW the headline so the
   type always stays in front of the photos. */
.hero-gallery{position:absolute;left:1040px;top:0;width:680px;height:1024px;
  perspective:1400px;perspective-origin:52% 46%;pointer-events:none;z-index:1}
/* the tilt lives here. The big rotateZ swings the spin AXIS onto the diagonal,
   so the photos travel top-right → bottom-left (a spiral-ish sweep); rotateX
   dishes the ring toward the viewer so the far photos ride up and stay visible. */
.hg-ring{position:absolute;left:50%;top:50%;width:270px;height:360px;
  margin:-180px 0 0 -135px;transform-style:preserve-3d;
  transform:rotateZ(-42deg) rotateX(14deg)}
/* no frame, no fill — raw prints. Cards face outward so the ring visibly spins
   (turning through edge-on); the far half stays visible (backface not hidden),
   just dimmer. The transform here is a STATIC fallback fan if JS never runs. */
.hg-card{position:absolute;inset:0;margin:0;overflow:hidden;border-radius:3px;
  transform:rotateY(calc(var(--i,0)*40deg)) translateZ(480px);
  box-shadow:0 30px 62px -32px rgba(0,0,0,.6);
  will-change:transform,opacity}
.hg-card img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){ .hg-card{will-change:auto} }

/* arrows drawn as SVG so their geometry is exact */
.arw{display:block;overflow:visible}
.arw line{stroke:currentColor;stroke-width:1;shape-rendering:crispEdges}
.arw path{stroke:currentColor;stroke-width:1;fill:none}

/* ---------------- scroll cue ----------------
   A thin vertical line that STRADDLES the hero → INTRODUCTION boundary: it is
   anchored to the 100vh seam (inside #luxy, so it scrolls with the content) and
   runs above and below the section break. A soft segment slides down it. */
#seamScroll{position:absolute;left:50%;top:calc(100vh - 56px);transform:translateX(-50%);
  z-index:5;pointer-events:none;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.seam-label{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.2em}
.seam-line{position:relative;width:1px;height:70px;background:rgba(255,255,255,.3);overflow:hidden}
.seam-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:38%;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.8);
  animation:rail 2.4s cubic-bezier(.6,0,.35,1) infinite}
@keyframes rail{0%{transform:translateY(-100%)}60%,100%{transform:translateY(167%)}}

/* ======================= INTRODUCTION section =======================
   Same 1536-reference stage idea as the hero: content is authored at the
   comp's pixel sizes, then the whole block is uniformly scaled to the
   viewport width so desktop matches the comp and narrower screens shrink
   proportionally. Section height tracks the scaled content (set in JS). */
/* the introduction background is now the shared fixed video (see #videobg);
   the section itself is transparent so the video shows through. */
.intro{position:relative;width:100%;overflow:hidden;background:transparent}

#introStage{position:absolute;left:0;top:0;width:1536px;
  transform-origin:0 0;color:#fff;text-align:center}
.intro-pad{padding:190px 0 170px}

/* same treatment as the MV headline: DIN Condensed, tight tracking */
/* tracking tuned so INTRODUCTION's ink width matches the subhead below it */
.intro-h{font-family:"DIN Condensed","Oswald","PT Sans Narrow","Arial Narrow",sans-serif;
  font-weight:400;font-size:126px;line-height:0;letter-spacing:6.3px;padding-left:6.3px}
/* padding-left nudges the line right to offset the trailing 。's built-in
   right bearing, so the subhead's centre lines up with INTRODUCTION above. */
.intro-sub{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  font-weight:700;font-size:52px;line-height:1;letter-spacing:4px;padding-left:30px;margin-top:10px}

.intro-blocks{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  font-weight:300;font-size:16px;line-height:33px;letter-spacing:.5px;
  color:rgba(255,255,255,.9);margin-top:44px}
.intro-blocks p{margin-top:32px}
.intro-blocks p:first-child{margin-top:0}

/* per-element scroll reveal (each element gets .shown as it enters view):
   INTRODUCTION + まずつくる。 rise up from behind a clip mask like the MV
   headline; the body blocks (つくるべきもの… onward) fade in one by one. */
.intro-h .clip,.intro-sub .clip{display:block;overflow:hidden}
.intro-h .clip i,.intro-sub .clip i{display:block;font-style:normal;line-height:1;transform:translateY(116%)}
.intro-h.shown  .clip i{animation:rise 1s cubic-bezier(.16,1,.3,1) both}
.intro-sub.shown .clip i{animation:rise 1s cubic-bezier(.16,1,.3,1) .1s both}
.sr{opacity:0;transition:opacity 1s cubic-bezier(.16,1,.3,1)}
.sr.shown{opacity:1}
.freeze .intro-h .clip i,.freeze .intro-sub .clip i{transform:none;animation:none}
.freeze .sr{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){
  .intro-h .clip i,.intro-sub .clip i{transform:none;animation:none}
  .sr{opacity:1;transition:none}
}

/* ---------------- entrance ---------------- */
.rv{opacity:0}
.ready .rv{animation:fade .9s cubic-bezier(.16,1,.3,1) both}
.h1 .clip i{transform:translateY(114%)}
.ready .h1 .clip i{animation:rise 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* frozen mode (?freeze) — pixel-diff harness; ?solo also drops the plate */
.solo .bg-wrap{display:none}
.introtop #viewport{display:none}   /* ?introtop — screenshot the intro alone */
.freeze .bg,.freeze .seam-line::after{animation:none!important}
.freeze .rv{opacity:1;animation:none!important}
.freeze .h1 .clip i{transform:none!important;animation:none!important}

@media (prefers-reduced-motion:reduce){
  .bg,.seam-line::after{animation:none!important}
  .rv{opacity:1;animation:none!important}
  .h1 .clip i{transform:none!important;animation:none!important}
}

/* ============================ mobile layout ============================
   Below 820px the fixed 1536 reference stage would scale the whole comp down
   to an unreadable size (the original complaint). Instead the hero and
   INTRODUCTION drop the scaling and lay out in natural flow with fluid (clamp)
   type. !important overrides the inline transform/height the desktop
   fit()/fitIntro() JS writes, so no JS branch is needed — resizing across the
   breakpoint just works. The fixed video background keeps covering as-is. */
@media (max-width:820px){
  /* ---------- hero: natural flow instead of the scaled comp ---------- */
  #viewport{height:auto;min-height:100vh;min-height:100svh;overflow:visible;display:flex}
  #stage{position:static!important;width:100%;height:auto;transform:none!important;
    display:flex;flex-direction:column;justify-content:center;
    min-height:100vh;min-height:100svh;padding:112px 16px 88px;color:#fff}
  /* the "B" orb now lives inside <h1>; anchor it to the mobile headline via em */
  h1{position:relative;z-index:0;margin:0 0 20px}
  .hero-orb{font-size:clamp(60px,18.5vw,116px);width:.436em;height:.436em;
    left:-.17em;top:-.18em;z-index:-1}                /* matches the desktop orb ratio/anchor */
  .l1,.l2{position:static!important;display:block;white-space:normal;left:auto;top:auto;
    transform:none!important;--sx:1;font-size:clamp(60px,18.5vw,116px);line-height:1.02}
  .lede{position:static!important;transform:none!important;left:auto;top:auto;
    white-space:normal;font-size:clamp(16px,4.6vw,20px);line-height:1.5;margin:0 0 18px}
  .body{position:static!important}
  .body p{position:static!important;transform:none!important;left:auto;top:auto;
    white-space:normal;font-size:14px;line-height:1.7;margin:0}
  .body p + p{margin-top:9px}

  /* the seam cue is anchored to the desktop 100vh split — hide on mobile */
  #seamScroll{display:none}

  /* the 3D photo orbit is sized to the desktop comp — hidden on the mobile
     natural-flow hero for now (a compact mobile treatment can come later) */
  .hero-gallery{display:none}

  /* ---------- INTRODUCTION: natural flow, left-aligned ---------- */
  .intro{height:auto!important}
  #introStage{position:static!important;width:100%!important;transform:none!important;text-align:left}
  .intro-pad{padding:84px 26px 80px}
  .intro-h{font-size:clamp(48px,15vw,96px);letter-spacing:1px;padding-left:0}
  .intro-sub{font-size:clamp(20px,6vw,38px);letter-spacing:1px;padding-left:0;margin-top:4px}
  .intro-orb{width:36px;height:36px;left:-14px;top:-6px}  /* svg scales via viewBox; dash stays valid */
  .intro-blocks{font-size:14px;line-height:1.9;margin-top:30px}
  .intro-blocks p{margin-top:22px}
}