/* GLOWNY — CLASSIC WINTER 26 lookbook
   Rules: DESIGN.md v2. Grid/opener/name/focus values follow the reference (gregorcollienne.com);
   the shop lookalike (.shop) uses the values measured on glowny.co.kr — the only place other
   colours than #fff / #0b0b0b / #F0EBDD appear. Only transform / opacity / filter are animated. */

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-v20-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #fff;
  --ink: #0b0b0b;
  --mute: rgba(11, 11, 11, .55);
  --cubic: cubic-bezier(.77, 0, .175, 1);
  --cubic-2: cubic-bezier(.5, 0, .5, 1);
  /* reference grid values */
  --offset-gap: 12vh;
  --col-gap: 6vw;
  --row-gap: 22vh;
  --plus: 32px;
  --edge: 24px;
  --name-w: clamp(240px, 42vw, 640px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; }

body {
  background: var(--paper);
  font-family: Manrope, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
img { display: block; }
ul { list-style: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ───────────── "+" opener (reference: two 3px bars, 3D flip between + and ×) ───────────── */
.opener {
  position: fixed; z-index: 66; top: var(--edge); left: 50%;
  width: var(--plus); height: var(--plus); margin-left: calc(var(--plus) / -2);
  perspective: 700px;
  overflow: hidden;              /* the icon that is flipped away sits edge-on outside the box */
  opacity: var(--op, 1);
}
.opener__icon {
  position: absolute; inset: 0;
  transform-style: preserve-3d; transform-origin: center center; backface-visibility: hidden;
  transition: transform .79s var(--cubic);
}
.opener__icon::before, .opener__icon::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 3px; margin-top: -1.5px; background: var(--ink);
}
.opener__icon--open::after { transform: rotate(90deg); }
.opener__icon--close::before { transform: rotate(45deg); }
.opener__icon--close::after { transform: rotate(-45deg); }
.opener__icon--close { transform: translateY(60%) rotateX(-90deg); transition: none; }

html.js:not(.is-finished) .opener__icon--open { transform: translateY(60%) rotateX(-90deg); }
html.is-menu-opening .opener__icon--open { transform: translateY(-60%) rotateX(90deg); }
html.is-menu-open .opener__icon--open { transform: translateY(60%) rotateX(-90deg); transition: none; }
html.is-menu-opening .opener__icon--close,
html.is-menu-open .opener__icon--close { transform: none; transition: transform .79s var(--cubic); }
html.is-menu-closing .opener__icon--close { transform: translateY(-60%) rotateX(90deg); transition: transform .79s var(--cubic); }

.opener.is-gone { visibility: hidden; }
html.is-focus .opener { opacity: 0; pointer-events: none; transition: opacity .3s var(--cubic-2); }

/* ───────────── centre name: fixed, on a layer BEHIND the photos (z1 < grid z2) ───────────── */
.name {
  position: fixed; z-index: 1; left: 50%; top: 50%;
  width: var(--name-w);
  translate: -50% -50%;
  transform-origin: 0 0;
  perspective: 1000px;
  pointer-events: none;
  font-size: 0;
}
.name__in {
  display: block;
  transform-style: preserve-3d; transform-origin: center center; backface-visibility: hidden;
}
.name__in img { width: 100%; height: auto; }
html.js .name__in { transform: translateY(50%) rotateX(-40deg); opacity: 0; filter: blur(12px); }
html.is-finished .name__in { transform: none; opacity: 1; filter: blur(0); transition: transform .79s var(--cubic) .6s, opacity .79s var(--cubic) .6s, filter .79s var(--cubic) .6s; }
html.is-landed .name__in { filter: none; transition: none; }
.name.is-docked { visibility: hidden; }

/* ───────────── overview grid (reference CSS values) ───────────── */
.overview {
  position: relative; z-index: 2;
  overflow-x: clip;
}
@supports not (overflow: clip) { .overview { overflow: hidden; } }

.grid {
  position: relative;
  width: 110%; left: -5%;
  top: calc(var(--offset-gap) * -1);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--row-gap);
}
.it {
  position: relative;
  height: calc((100vh + var(--offset-gap) * 2) / 3 - var(--row-gap) * 2 / 3);
  height: calc((100svh + var(--offset-gap) * 2) / 3 - var(--row-gap) * 2 / 3);
}
.it:nth-child(5n+2), .it:nth-child(5n+4) { transform: translateY(calc(50% + var(--row-gap) / 2)); }

.media {
  position: absolute; top: 50%; left: 50%;
  width: 110%; height: 120%;
  transform: translate(-50%, -50%);
}
.ph {
  position: absolute; inset: 0;
  display: block; padding: 0;
  pointer-events: none;           /* the photo itself is the hit area, not the empty box around it */
}
.ph img {
  position: absolute; top: 50%; left: 50%;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.ph:focus-visible { outline: none; }
.ph:focus-visible img { outline: 2px solid var(--ink); outline-offset: 3px; }
.ph.is-flying img { visibility: hidden; }

/* intro: photos pile up at the screen centre, then fly to their spots (reference initializeOverviewItems) */
html.js .media { opacity: 0; }
html.is-ready .media { opacity: 1; }
html.is-ready .it.is-intro { z-index: var(--z); }
html.is-ready .it.is-intro .media {
  opacity: 0;
  transform: translate(calc(var(--tx) - 50%), calc(var(--ty) - 50%));
}
html.is-loaded .it.is-intro .media { opacity: 1; transition: opacity 0s calc(var(--z) * .1s); }
html.is-finished .it.is-intro .media {
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--cubic) calc(var(--d) * .01s);
}

/* ───────────── finale: the last photo pins at the centre and becomes the shop hero ───────────── */
.finale { display: none; }
html.js .finale {
  display: block;
  position: relative; z-index: 3;
  margin-top: var(--fin-mt, 0px);
  height: var(--fin-h, 250vh);
  pointer-events: none;
}
.stage {
  position: sticky; top: 0;
  height: 100vh;
}
.stage__media {
  position: absolute; top: 50%;
  left: var(--fm-x, 40%); width: var(--fm-w, 20%); height: var(--fm-h, 30%);
  transform: translateY(-50%);
}
.stage__media .ph img { pointer-events: auto; }
.stage__media.is-off .ph img { pointer-events: none; }

.hero {
  position: absolute; left: 0; top: var(--hero-top, 100px);
  width: 100%; height: calc(100% - var(--hero-top, 100px));
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  contain: strict;
}
.hero img {
  position: absolute; left: var(--hi-x, 0px); top: 0;
  width: var(--hi-w, 100%); height: var(--hi-h, auto);
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
}
/* full-resolution copy sits on top of the 800px one and appears only once it is decoded (no blank frame on the swap) */
.hero__hi { opacity: 0; transition: opacity .3s var(--cubic-2); }
.hero__hi.is-on { opacity: 1; }
.hero.is-still, .hero.is-still img { will-change: auto; }
.hero.is-hidden, .hero.is-away { visibility: hidden; }

/* shop lookalike — every element is a real link into glowny.co.kr (measured values, see assets/shop-first-screen/spec.json) */
.shop { position: absolute; inset: 0; color: #000; font-family: Manrope, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; -webkit-font-smoothing: auto; }
.shop.is-off { visibility: hidden; }
.shop.is-live a { pointer-events: auto; }
.shop__fade { position: absolute; inset: 0; opacity: 0; }
.shop__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: #F0EBDD; text-align: center;
  font-size: 11px; line-height: 30px; font-weight: 700; white-space: nowrap;
}
.shop__bar b { font-weight: 900; }
.shop__hdr {
  position: absolute; left: 0; right: 0; top: 30px; height: 71px;
  background: #fff; border-bottom: 1px solid #000;
}
.shop__nv { position: absolute; top: 25px; font-size: 13px; line-height: 18px; font-weight: 400; white-space: nowrap; }
.shop__nv--shop { left: calc(50% - 169.094px); }
.shop__nv--search { left: calc(50% - 104.922px); }
.shop__nv--girls { left: calc(50% - 24.984px); }
.shop__nv--journal { left: calc(50% + 40.063px); }
.shop__nv--about { left: calc(50% + 126.594px); }
.shop__nv--account { left: auto; right: 120.796px; top: 24px; font-size: 15px; line-height: 21px; }
.shop__nv--bag { left: auto; right: 25px; top: 24px; font-size: 15px; line-height: 21px; }
.shop__ic { position: absolute; display: block; }
.shop__ic img { width: 100%; height: 100%; }
.shop__ic--wish { right: 78.984px; top: 27.5px; width: 16.813px; height: 15px; }
.shop__ic--search { right: 122.609px; top: 20px; width: 15.688px; height: 15px; }
.shop__ic--user { right: 89.578px; top: 20px; width: 13.031px; height: 15px; }
.shop__ic--cart { right: 55px; top: 19px; width: 14.578px; height: 17px; }
.shop__ic--menu { right: 15px; top: 0; width: 40px; height: 55px; }
.shop__ic--menu i { position: absolute; right: 0; width: 20px; height: 1px; background: #000; }
.shop__ic--menu i:first-child { top: 22.5px; }
.shop__ic--menu i:last-child { top: 31.5px; }
.shop__hero { position: absolute; left: 0; right: 0; top: 100px; bottom: 0; }
.shop__h2 {
  position: absolute; left: 20px; bottom: 80px;
  color: #fff; font-size: 50px; line-height: 50px; font-weight: 800; white-space: nowrap;
}
.shop__btn {
  position: absolute; left: 20px; bottom: 30px; width: 165px; height: 40px;
  background: #fff; border: 1px solid #fff; border-radius: 4px;
  color: #808080; font-size: 12px; line-height: 38px; font-weight: 500; text-align: center;
}
.shop__logo { position: absolute; left: 25px; top: 54.703px; width: 125px; opacity: 0; }
.shop__logo img { width: 125px; height: auto; }
.shop__logo.is-on { opacity: 1; }
.pc-only { display: block; }
.mo-only { display: none; }

/* ───────────── focus view (reference: thumb strip with a wave, centred stage, BACK) ───────────── */
.focus { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
html.is-focus .focus { visibility: visible; }
.focus__bg { position: absolute; inset: 0; background: var(--paper); opacity: 0; transition: opacity .49s var(--cubic-2) .2s; }
html.is-focus-in .focus__bg { opacity: 1; transition-delay: 0s; }

.focus__thumbs {
  position: absolute; left: 0; top: 0; bottom: 0; width: 260px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: calc(50vh - 53.5px) 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.focus__thumbs::-webkit-scrollbar { display: none; }
.ft {
  flex: none; display: block; height: 107px; margin-left: var(--edge);
  padding: 0;
}
.ft__in {
  display: block; height: 100%;
  transform: translateX(-140px);
  transition: transform .79s var(--cubic) calc(var(--sd, 0) * .03s);
}
html.is-focus-in .ft__in { transform: none; }
.ft img { height: 100%; width: auto; max-width: none; }
.ft:focus-visible { outline: none; }
.ft:focus-visible img { outline: 2px solid var(--ink); outline-offset: 3px; }
.ft__wave { display: block; height: 100%; }

.focus__stage {
  position: absolute; top: 64px; bottom: 64px; left: 50%;
  width: min(56vw, calc(100vw - 2 * (var(--edge) + var(--info-w) + 16px)));
  translate: -50% 0;
  pointer-events: none;
}
.focus__pic { position: absolute; opacity: 0; transition: opacity .25s var(--cubic-2); }
.focus__pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.focus__pic .hi { opacity: 0; transition: opacity .3s var(--cubic-2); }
.focus__pic .hi.is-on { opacity: 1; }
html.is-focus-in .focus__pic.is-shown { opacity: 1; transition: none; }

.focus__back {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0;
  font-size: 32px; line-height: 32px; font-weight: 800;
  perspective: 1000px; padding: 0 4px;
}
.focus__back span {
  display: block; transform-style: preserve-3d; backface-visibility: hidden;
  transform: translateY(50%) rotateX(-40deg); opacity: 0;
  transition: transform .79s var(--cubic), opacity .79s var(--cubic);
  border-bottom: 2px solid transparent;
}
html.is-focus-in .focus__back span { transform: none; opacity: 1; }
@media (hover: hover) { .focus__back:hover span { border-color: var(--ink); } }

:root { --info-w: clamp(220px, 21vw, 300px); }
.focus__info {
  position: absolute; right: var(--edge); bottom: 64px; width: var(--info-w);
  max-height: calc(100vh - 128px); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
  opacity: 0; transform: translateY(12px);
  transition: opacity .49s var(--cubic-2), transform .79s var(--cubic);
}
.focus__info::-webkit-scrollbar { display: none; }
.focus__info.is-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
html.is-focus-in .focus__info { opacity: 1; transform: none; transition-delay: .3s; }
.focus__cap { font-size: 13px; line-height: 18px; font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.focus__items a { display: block; padding: 12px 0; border-bottom: 1px solid var(--ink); font-size: 13px; line-height: 18px; }
.focus__items a:focus-visible { outline-offset: -2px; }
.focus__pr { display: flex; gap: 8px; margin-top: 4px; }
.focus__pr b { font-weight: 500; }
.focus__pr del { color: var(--mute); }
@media (hover: hover) { .focus__items a:hover .focus__nm { text-decoration: underline; text-underline-offset: 3px; } }

.flyer {
  position: fixed; z-index: 80; left: 0; top: 0;
  transform-origin: 0 0; pointer-events: none;
  will-change: transform;
}

/* ───────────── menu screen (reference navscreen: white, blur 12 → 0, links flip in) ───────────── */
.nav { position: fixed; inset: 0; z-index: 65; visibility: hidden; }
html.is-menu-opening .nav, html.is-menu-open .nav, html.is-menu-closing .nav { visibility: visible; }
.nav::before {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  opacity: 0; transition: opacity .49s var(--cubic-2) .4s;
}
html.is-menu-opening .nav::before, html.is-menu-open .nav::before { opacity: 1; transition-delay: 0s; }
.nav__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: var(--edge);
  filter: blur(12px);
  transition: filter .49s var(--cubic-2) .1s;
}
html.is-menu-opening .nav__inner, html.is-menu-open .nav__inner { filter: blur(0); transition: filter .49s var(--cubic-2); }
html.is-menu-open .nav__inner { filter: none; }
.nav__main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
.nav__bot { display: flex; justify-content: space-between; align-items: flex-end; }
.nav li { perspective: 1000px; }
.nav a {
  display: block; line-height: 1; font-weight: 800;
  transform-style: preserve-3d; transform-origin: center center; backface-visibility: hidden;
  transform: translateY(30%) rotateX(-40deg); opacity: 0;
  transition: transform .49s ease, opacity .49s ease;
  border-bottom: 4px solid transparent;
}
.nav__main a { font-size: clamp(36px, 5.5vw, 82px); padding-top: .06em; }
.nav__bot a { font-size: clamp(21px, 3.4vw, 44px); border-bottom-width: 2px; }
.nav a[aria-current="page"] { border-color: var(--ink); }
@media (hover: hover) { .nav a:hover { border-color: var(--ink); } }
html.is-menu-opening .nav a, html.is-menu-open .nav a {
  transform: none; opacity: 1;
  transition: transform .79s var(--cubic) calc(var(--i, 0) * .06s), opacity .79s var(--cubic) calc(var(--i, 0) * .06s);
}
html.is-menu-opening .nav__bot a, html.is-menu-open .nav__bot a { transition-delay: calc(.1s + var(--i, 0) * .03s); }
html.is-menu-closing .nav a {
  transform: translateY(-30%) rotateX(40deg); opacity: 0;
  transition: transform .79s var(--cubic), opacity .79s var(--cubic);
}

/* ───────────── mobile (≤768px): reference mobile values, designed separately ───────────── */
@media (max-width: 768px) {
  :root { --col-gap: 16px; --offset-gap: 8vh; --plus: 24px; --edge: 16px; --name-w: 62vw; }
  .grid { width: 100%; left: 0; }
  .media { width: 160%; height: 70%; }

  .shop__hdr { height: 56px; }
  .shop__logo { left: 15px; top: 47.516px; }
  .shop__hero { top: 85px; }
  .shop__h2 { left: 15px; bottom: 75px; font-size: 25px; line-height: 25px; }
  .shop__btn { left: 15px; bottom: 25px; }
  .pc-only { display: none; }
  .mo-only { display: block; }

  .focus__thumbs {
    left: 0; right: 0; top: auto; bottom: 16px; width: auto; height: 88px;
    overflow-x: auto; overflow-y: hidden;
    padding: 24px calc(50vw - 40px) 0;
    flex-direction: row; align-items: flex-end; gap: 12px;
  }
  .ft { height: 64px; margin-left: 0; }
  .ft__in { transform: translateY(104px); }
  .focus__stage { top: 96px; bottom: auto; height: 46vh; left: 16px; right: 16px; width: auto; translate: none; }
  .focus__back { top: 44px; bottom: auto; font-size: 19px; line-height: 26px; }
  .focus__info {
    left: 16px; right: 16px; width: auto;
    top: calc(96px + 46vh + 24px); bottom: 120px; max-height: none;
  }
  .nav__bot a { border-bottom-width: 2px; }
  .nav a { border-bottom-width: 3px; }
}

/* ───────────── reduced motion: no intro flight, no flips, finale is a plain crossfade ───────────── */
@media (prefers-reduced-motion: reduce) {
  html.js .media, html.is-ready .it.is-intro .media { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  html.js .name__in { transform: none; opacity: 1; filter: none; transition: none; }
  html.js .opener__icon, html.js .opener__icon--open { transition: none; }
  html.js:not(.is-finished) .opener__icon--open { transform: none; }
  .nav a, .nav__inner, .nav::before, .ft__in, .focus__back span, .focus__info, .focus__bg, .focus__pic, .focus__pic .hi {
    transition-duration: .01s !important; transition-delay: 0s !important;
  }
  .nav__inner { filter: none; }
}