/* ROMXI — the galaxy home. Builds on home.css tokens; the hero is lapis night, the page after it is paper. */
:root{--night:#03050C;--night-2:#0A1430;--star:#E8ECF3;--star-dim:rgba(232,236,243,.7)}

.galaxy{position:relative;height:620vh;background:var(--night)}
.gx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
#gx{position:absolute;inset:0;width:100%;height:100%;display:block}
.gx-stage.no-gl{background:radial-gradient(ellipse at 50% 45%,var(--night-2),var(--night) 70%)}
.gx-stage.no-gl #gx{display:none}
/* a whisper of lapis at the edges, and a fine grain over everything */
.gx-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--night),transparent calc(var(--head) + 40px)),radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(10,20,48,.55))}

/* the flare: where the light is born */
.gx-flare{position:absolute;left:50%;top:48%;width:0;height:0;opacity:0;pointer-events:none;mix-blend-mode:screen;--s:1}
.gx-flare::before,.gx-flare::after,.gx-flare i{content:"";position:absolute;left:0;top:0;translate:-50% -50%;scale:var(--s)}
.gx-flare::before{width:46vmin;height:46vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(190,210,255,.16) 22%,transparent 62%)}
.gx-flare::after{width:70vmin;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
.gx-flare i{width:1px;height:46vmin;background:linear-gradient(transparent,rgba(255,255,255,.7),transparent)}

/* the shiny spot that follows the mouse across the night */
.gx-glow{position:absolute;left:0;top:0;width:0;height:0;z-index:2;opacity:0;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity}
.gx-glow::before{content:"";position:absolute;left:0;top:0;width:240px;height:240px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.32),rgba(200,215,255,.12) 18%,rgba(120,150,230,.05) 42%,transparent 70%)}
.gx-glow::after{content:"";position:absolute;left:0;top:0;width:6px;height:6px;translate:-50% -50%;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(220,230,255,.9)}

/* words */
.gx-beat{position:absolute;z-index:3;left:var(--gut);right:var(--gut);text-align:center;opacity:0;pointer-events:none;color:var(--star)}
.gx-beat.low{bottom:clamp(44px,9vh,96px)}
.gx-beat.high{top:calc(var(--head) + clamp(10px,4vh,40px))}
.gx-beat .over{color:var(--star-dim);letter-spacing:.34em;padding-left:.34em}
.gx-beat h1,.gx-beat h2{color:#F3F5FA;font-weight:300;margin-top:16px;text-wrap:balance}
.gx-beat h1{font-family:var(--display);font-size:clamp(38px,5.6vw,84px);letter-spacing:.02em;line-height:1.05}
.gx-beat h2{font-size:clamp(32px,4.2vw,62px)}
.gx-beat p.say{font-family:var(--serif);font-size:clamp(18px,1.7vw,23px);color:var(--star-dim);margin:14px auto 0;max-width:36ch}
.gx-beat .han{font-family:"Noto Serif SC","Songti SC",serif;font-weight:300;letter-spacing:0}
.gx-beat .acts{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px;pointer-events:auto}
.gx-beat .btn{color:var(--star);border-color:rgba(232,236,243,.5)}
.gx-beat .btn:hover{background:var(--star);color:var(--night)}
.gx-beat .btn.solid{background:var(--star);border-color:var(--star);color:var(--night)}
.gx-beat .btn.solid:hover{background:#fff}
.gx-cue{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--star-dim)}
.gx-cue::after{content:"";width:1px;height:40px;background:linear-gradient(var(--star),transparent);animation:cue 2.6s var(--ease) infinite;transform-origin:top}
.gx-skip{position:absolute;z-index:4;right:var(--gut);bottom:22px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--star-dim)}
.gx-skip:hover{color:var(--star)}

/* the header is light while it floats over the night */
.gx-page:not(.gx-day) .head:not(.solid) .nav a,.gx-page:not(.gx-day) .head:not(.solid) .bag,.gx-page:not(.gx-day) .head:not(.solid) .brand{color:var(--star)}
.gx-page:not(.gx-day) .head:not(.solid) .menu-btn span{background:var(--star)}
/* daybreak: the end of the hero brightens into the page, so there is no seam */
.gx-dawn{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
  background:var(--paper)}
/* the sun comes up first, a soft white light rising from below the bracelet; then the page */
.gx-sun{position:absolute;left:50%;bottom:-55%;width:180%;height:130%;translate:-50% 0;z-index:3;opacity:0;pointer-events:none;mix-blend-mode:screen;border-radius:50%;
  background:radial-gradient(closest-side,#fff,rgba(236,240,250,.85) 30%,rgba(190,205,240,.35) 62%,transparent)}
.gx-page .head .brand{opacity:1}

/* after the night: the four lines, on paper */
.lines .shead{text-align:center;justify-content:center}
.lines .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.lines .tile{display:block;color:var(--ink)}
.lines .tile .ph{aspect-ratio:1;overflow:hidden;background:#F6F5F3}
.lines .tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.lines .tile:hover img{transform:scale(1.05)}
.lines .tile .lbl{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-family:var(--serif);font-size:clamp(20px,1.8vw,26px)}
.lines .tile small{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

@media (max-width:860px){
  .galaxy{height:560vh}
  .lines .grid4{grid-template-columns:1fr 1fr}
  .gx-beat .acts .btn{min-height:46px;padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  .galaxy{height:100svh}
  .gx-beat.final{opacity:1!important;visibility:visible!important}
}

/* the real piece: the product photo takes the place of the bracelet of light at daybreak (bracelet-real.js) */
.gx-real{position:absolute;left:0;top:0;z-index:4;transform-origin:50% 49%;opacity:0;pointer-events:none;max-width:none;height:auto;aspect-ratio:1;
  -webkit-mask:radial-gradient(ellipse 52% 40% at 50% 49%,#000 70%,transparent);mask:radial-gradient(ellipse 52% 40% at 50% 49%,#000 70%,transparent)}
.gx-beat.day{z-index:5;color:var(--ink)}
.gx-beat.day .over{color:var(--muted)}
.gx-beat.day h2{color:var(--ink)}
.gx-beat.day .btn{color:var(--ink);border-color:var(--ink)}
.gx-beat.day .btn:hover{background:var(--ink);color:var(--paper)}
.gx-beat.day .btn.solid{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* half real: the bracelet's own light, white on black, added to the night (bracelet-half.js) */
.gx-real.light{z-index:2;mix-blend-mode:screen;--a:0deg;
  -webkit-mask:conic-gradient(from 180deg at 50% 49.6%,#000 calc(var(--a) - 24deg),transparent var(--a),transparent calc(360deg - var(--a)),#000 calc(384deg - var(--a)));
  mask:conic-gradient(from 180deg at 50% 49.6%,#000 calc(var(--a) - 24deg),transparent var(--a),transparent calc(360deg - var(--a)),#000 calc(384deg - var(--a)))}
.gx-real.photo{transform-origin:50% 49.6%;-webkit-mask:radial-gradient(ellipse 60% 44% at 50% 49.6%,#000 76%,transparent);mask:radial-gradient(ellipse 60% 44% at 50% 49.6%,#000 76%,transparent)}