/* ============================================================
   Sample Media — premium dark gallery
   Seed tokens drive everything (see set_nudges / Appearance).
   ============================================================ */
:root{
  --seed-bg:#08090b;
  --seed-fg:#e9eaec;
  --seed-primary:#7df9d0;   /* accent glow (non-indigo, tuned) */
  --seed-accent:#8ab4ff;    /* secondary cool */
  --seed-surface:#111318;
  --seed-radius:18px;

  /* derived */
  --bg:var(--seed-bg);
  --fg:var(--seed-fg);
  --primary:var(--seed-primary);
  --accent:var(--seed-accent);
  --surface:var(--seed-surface);
  --muted:color-mix(in oklab, var(--fg) 55%, transparent);
  --faint:color-mix(in oklab, var(--fg) 26%, transparent);
  --line:color-mix(in oklab, var(--fg) 12%, transparent);
  --glass:color-mix(in oklab, var(--fg) 6%, transparent);
  --glass-strong:color-mix(in oklab, var(--fg) 12%, transparent);
  --r:var(--seed-radius);
  --r-pill:999px;
  --pad:clamp(18px,4vw,56px);
  --maxw:1680px;

  /* structural / utility tokens (keeps all color in :root) */
  --c-white:#ffffff;
  --c-black:#000000;
  --media-bg:color-mix(in oklab,var(--seed-surface),var(--seed-bg) 45%);
  --shadow:0 40px 80px -30px color-mix(in oklab,var(--c-black) 82%,transparent);
  --shadow-lg:0 50px 120px -30px color-mix(in oklab,var(--c-black) 80%,transparent);
  --shadow-sm:0 12px 30px -6px color-mix(in oklab,var(--c-black) 70%,transparent);
  --shadow-menu:0 30px 60px -20px color-mix(in oklab,var(--c-black) 78%,transparent);
  --grid-line:color-mix(in oklab,var(--fg) 5%,transparent);

  --font:'Space Grotesk', ui-sans-serif, system-ui, -apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,
         'Noto Sans','PingFang SC','Hiragino Sans','Microsoft YaHei','Noto Sans SC','Noto Sans JP','Noto Sans KR',
         'Noto Sans Arabic','Geeza Pro','Segoe UI','Noto Sans Thai','Noto Sans Devanagari',sans-serif;
  --mono:'JetBrains Mono', ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font);
  font-weight:400;letter-spacing:-.01em;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;font-feature-settings:"kern" 1;
}
body[dir="rtl"]{direction:rtl}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-weight:400;font-size:.72rem}
:focus-visible{outline:2px dashed color-mix(in oklab,var(--primary) 80%,transparent);outline-offset:3px;border-radius:6px}
::selection{background:color-mix(in oklab,var(--primary) 40%,transparent);color:var(--fg)}

/* ---- ambient layers ---- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* technical dot-grid + a single token-driven top glow (no drifting blobs) */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none}
.aurora::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at center,var(--grid-line) 1px,transparent 1.4px);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(120% 90% at 50% 0,var(--c-black),transparent 75%);mask-image:radial-gradient(120% 90% at 50% 0,var(--c-black),transparent 75%);opacity:.5}
.aurora::after{content:'';position:absolute;left:0;right:0;top:-10%;height:60vh;
  background:radial-gradient(80% 100% at 50% 0,color-mix(in oklab,var(--primary) 12%,transparent),transparent 70%)}

/* ---- custom cursor ---- */
.cursor{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;mix-blend-mode:difference;transform:translate(-100px,-100px)}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--c-white)}
.cursor__ring{width:38px;height:38px;border:1px solid var(--c-white);transition:width .25s,height .25s,background .25s,opacity .25s}
.cursor__label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-white);white-space:nowrap;opacity:0}
body.hovering .cursor__ring{width:66px;height:66px;background:color-mix(in oklab,var(--c-white) 20%,transparent)}
body.showlabel .cursor__label{opacity:1}
body.showlabel .cursor__ring{width:88px;height:88px}
@media (pointer:coarse),(hover:none){.cursor{display:none}}

/* ---- loader ---- */
.loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-content:center;gap:22px;justify-items:center;transition:opacity .6s ease,visibility .6s}
.loader__mark{font:500 clamp(22px,5vw,42px)/1 var(--font);letter-spacing:-.02em;color:var(--faint)}
.loader__mark span{color:var(--fg)}
.loader__bar{width:min(320px,60vw);height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.loader__bar i{display:block;height:100%;width:40%;background:var(--primary);transform:translateX(-100%);animation:load 1.1s cubic-bezier(.7,0,.3,1) infinite}
@keyframes load{to{transform:translateX(280%)}}
body.loaded .loader{opacity:0;visibility:hidden}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in oklab,var(--bg) 72%,transparent);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:1.05rem;letter-spacing:-.02em}
.brand em{font-style:normal;color:var(--faint)}
.brand__dot{width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 18px color-mix(in oklab,var(--primary) 70%,transparent);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.7);opacity:.7}}
.nav__actions{display:flex;align-items:center;gap:12px}

.btn-pill{display:inline-flex;align-items:center;padding:9px 20px 10px;border-radius:var(--r-pill);background:var(--fg);color:var(--bg);font-size:.85rem;font-weight:500;letter-spacing:-.01em;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.btn-pill:hover{opacity:.88}

/* ---- language switcher ---- */
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--glass);color:var(--fg);font-size:.82rem;letter-spacing:-.01em;transition:border-color .3s,background .3s}
.lang__btn:hover{border-color:var(--faint);background:var(--glass-strong)}
.lang__chev{transition:transform .3s}
.lang.open .lang__chev{transform:rotate(180deg)}
.lang__menu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);width:min(300px,80vw);max-height:60vh;overflow:auto;z-index:300;
  background:color-mix(in oklab,var(--surface) 92%,transparent);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:var(--r);
  padding:8px;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .25s,visibility .25s;box-shadow:var(--shadow-menu)}
body[dir="rtl"] .lang__menu{transform-origin:top left}
.lang.open .lang__menu{opacity:1;visibility:visible;transform:none}
.lang__menu li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;font-size:.82rem;cursor:pointer;color:var(--muted);transition:background .2s,color .2s}
.lang__menu li:hover{background:var(--glass);color:var(--fg)}
.lang__menu li[aria-selected="true"]{color:var(--fg)}
.lang__menu li[aria-selected="true"]::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none}
.lang__menu li:not([aria-selected="true"])::before{content:'';width:6px;height:6px;border-radius:50%;background:transparent;border:1px solid var(--line);flex:none}
.lang--foot .lang__menu{inset-inline-start:0;inset-inline-end:auto;transform-origin:bottom left}

/* ---- hero ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px);padding:120px var(--pad) 60px;position:relative}
.hero__kicker{color:var(--primary);display:flex;align-items:center;gap:12px}
.hero__kicker::before{content:'';width:34px;height:1px;background:var(--primary);opacity:.5}
.hero__title{font-size:clamp(3rem,13vw,11rem);line-height:.92;font-weight:500;letter-spacing:-.04em;max-width:16ch}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span,.hero__title .line{will-change:transform}
.amp{font-family:var(--mono);color:var(--primary);font-weight:300;font-size:.6em;letter-spacing:0}
.hero__sub{max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.6vw,1.28rem);font-weight:300;line-height:1.5}
.hero__meta{display:flex;align-items:center;gap:clamp(20px,4vw,52px);flex-wrap:wrap;margin-top:6px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-size:1.7rem;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{color:var(--faint);font-size:.78rem}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;margin-inline-start:auto;padding:14px 26px;border-radius:var(--r-pill);border:1px solid var(--faint);font-size:1rem;transition:background .3s,color .3s,border-color .3s}
.btn-ghost i{transition:transform .3s}
.btn-ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-ghost:hover i{transform:translateY(4px)}
.hero__reel{position:absolute;inset-inline-end:calc(var(--pad) - 8px);top:22%;width:min(38vw,560px);height:min(52vh,520px);opacity:.5;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,black 25%,black 70%,transparent)}
.hero__reel img{position:absolute;border-radius:14px;object-fit:cover;box-shadow:var(--shadow);border:1px solid var(--line);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);opacity:0}
@media (max-width:900px){.hero__reel{display:none}}

/* ---- filter ---- */
.filterbar{position:sticky;top:56px;z-index:120;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);background:color-mix(in oklab,var(--bg) 60%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filterbar__pills{display:flex;gap:8px}
.pill{padding:9px 20px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted);font-size:.86rem;letter-spacing:-.01em;transition:all .3s}
.pill:hover{color:var(--fg);border-color:var(--faint)}
.pill.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.filterbar__count{color:var(--faint);font-variant-numeric:tabular-nums}

/* ---- gallery grid (masonry via columns) ---- */
.gallery{padding:clamp(28px,5vw,60px) var(--pad)}
.grid{columns:4;column-gap:14px}
@media (max-width:1400px){.grid{columns:3}}
@media (max-width:820px){.grid{columns:2}}
@media (max-width:520px){.grid{columns:1}}
.card{break-inside:avoid;margin:0 0 14px;position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);cursor:pointer;transform:translateY(28px);opacity:0;transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.card.in{opacity:1;transform:none}
.card__media{position:relative;overflow:hidden;background:var(--media-bg)}
.card__media img{width:100%;height:auto;display:block;transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s;will-change:transform}
.card:hover .card__media img{transform:scale(1.08)}
.card__sheen{position:absolute;inset:0;background:linear-gradient(120deg,transparent,color-mix(in oklab,var(--c-white) 22%,transparent),transparent);transform:translateX(-120%);transition:transform .9s;mix-blend-mode:overlay;pointer-events:none}
.card:hover .card__sheen{transform:translateX(120%)}
.card__tag{position:absolute;top:10px;inset-inline-start:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);background:color-mix(in oklab,var(--bg) 60%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono)}
.card__dur{position:absolute;bottom:10px;inset-inline-end:10px;z-index:2;padding:4px 10px;border-radius:8px;background:color-mix(in oklab,var(--bg) 65%,transparent);backdrop-filter:blur(6px);font-family:var(--mono);font-size:.7rem;font-variant-numeric:tabular-nums}
.card__play{position:absolute;inset:0;z-index:1;display:grid;place-content:center;opacity:0;transition:opacity .4s}
.card:hover .card__play{opacity:1}
.card__play i{width:64px;height:64px;border-radius:50%;display:grid;place-content:center;background:color-mix(in oklab,var(--fg) 92%,transparent);color:var(--bg);font-style:normal;font-size:20px;padding-inline-start:4px;box-shadow:var(--shadow-sm);transform:scale(.8);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__play i{transform:scale(1)}
.card__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:36px 16px 14px;background:linear-gradient(to top,var(--bg),transparent);transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);font-size:.82rem;color:var(--muted)}
.card:hover .card__cap{transform:none}
.empty{padding:60px;text-align:center;color:var(--faint)}

/* ---- footer ---- */
.foot{position:relative;margin-top:40px;border-top:1px solid var(--line);padding:clamp(40px,8vw,110px) var(--pad) 24px;overflow:hidden}
.foot__word{position:absolute;inset-inline:0;top:6px;font-weight:700;font-size:clamp(3rem,17vw,16rem);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line);white-space:nowrap;text-align:center;pointer-events:none;user-select:none}
.foot__inner{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;max-width:var(--maxw);margin:0 auto;padding-block:40px}
.foot__col h3{color:var(--primary);margin-bottom:14px;font-weight:400}
.foot__col p{color:var(--muted);max-width:44ch;font-weight:300;font-size:1.02rem}
.foot__col .mono{color:var(--fg);font-size:1rem;letter-spacing:.02em;text-transform:none;margin-bottom:8px}
.foot__hint{font-size:.8rem!important;color:var(--faint)!important;margin-bottom:16px}
.foot__name{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;margin-bottom:14px}
.foot__name span{color:var(--faint);font-weight:300;font-size:1.05rem}
.contact{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.contact a{display:inline-flex;align-items:center;gap:12px;color:var(--muted);font-size:1rem;padding:6px 0;transition:color .3s}
.contact a svg{color:var(--primary);flex:none;transition:transform .3s}
.contact a:hover{color:var(--fg)}
.contact a:hover svg{transform:scale(1.12)}
.foot__bar{position:relative;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;margin-top:30px;border-top:1px solid var(--line);color:var(--faint)}
.foot__bar a:hover{color:var(--fg)}
@media (max-width:720px){.foot__inner{grid-template-columns:1fr}}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;z-index:9000;background:color-mix(in oklab,var(--bg) 94%,transparent);backdrop-filter:blur(30px);
  display:grid;grid-template-rows:1fr auto;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.lb.open{opacity:1;visibility:visible}
.lb__stage{position:relative;display:grid;place-content:center;overflow:hidden;padding:56px var(--pad) 8px}
.lb__stage img{max-width:min(1200px,92vw);max-height:80vh;border-radius:10px;box-shadow:var(--shadow-lg);cursor:grab;transform-origin:center;user-select:none}
.lb__stage img.zoomed{cursor:zoom-in}
.lb__stage video{width:min(1100px,92vw);max-height:80vh;border-radius:12px;background:var(--c-black);box-shadow:var(--shadow-lg)}
.lb__close,.lb__nav{position:absolute;z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--fg);display:grid;place-content:center;font-size:26px;line-height:1;transition:background .3s,transform .3s,border-color .3s}
.lb__close{top:18px;inset-inline-end:18px}
.lb__close:hover{background:var(--fg);color:var(--bg);transform:rotate(90deg)}
.lb__prev{top:50%;inset-inline-start:16px;transform:translateY(-50%)}
.lb__next{top:50%;inset-inline-end:16px;transform:translateY(-50%)}
.lb__nav:hover{background:var(--fg);color:var(--bg)}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--pad) 22px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.lb__meta{display:flex;align-items:center;gap:14px}
.lb__meta .mono{color:var(--primary)}
.lb__hint{font-size:.68rem}
@media (max-width:640px){.lb__hint{display:none}.lb__nav{width:44px;height:44px;font-size:22px}}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card{transform:none;opacity:1}
  .aurora{opacity:.3}
  .cursor{display:none}
}