/* yy — self-contained design system. No third-party assets; background,
   grain, and atmosphere are generated here. */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
img{ display:block; max-width:100%; }
button{ font:inherit; }

:root{
  --ink:   rgba(255,255,255,.95);
  --muted: rgba(255,255,255,.55);
  --faint: rgba(255,255,255,.30);
  --line:  rgba(255,255,255,.13);
  --pad:   clamp(22px, 4vw, 56px);
}

html,body{
  height:100%;
  background:#0a0a0a;
  color:var(--ink);
  font-family:Manrope, -apple-system, system-ui, sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* full-screen locked stage */
.yy-page{ position:fixed; inset:0; overflow:hidden; background:#0a0a0a; }

/* ---- generated atmosphere (own replica of the dark/streaked look) ---- */
.yy-bg{ position:absolute; inset:0; z-index:0; background:#0a0a0a; }
.yy-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 72% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(26% 72% at 17% 42%, rgba(255,255,255,.05),  transparent 72%),
    radial-gradient(20% 64% at 39% 30%, rgba(255,255,255,.035), transparent 72%),
    radial-gradient(22% 74% at 82% 34%, rgba(255,255,255,.045), transparent 72%),
    radial-gradient(18% 60% at 61% 20%, rgba(255,255,255,.03),  transparent 72%),
    linear-gradient(#0b0b0b, #060606);
}
.yy-bg::after{ /* vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(135% 95% at 50% 42%, transparent 54%, rgba(0,0,0,.62));
}
.yy-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ---- frame: corner mark, status, bottom nav ---- */
.yy-frame{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.yy-frame a, .yy-frame button{ pointer-events:auto; }

.yy-mark{
  position:absolute; top:var(--pad); left:var(--pad);
  display:flex; align-items:center; gap:13px; text-decoration:none;
  opacity:0; animation:yy-in .9s .1s forwards ease;
}
.yy-mark img{ height:42px; width:auto; object-fit:contain; opacity:.9; }
.yy-mark .x{ color:var(--faint); font-size:20px; font-weight:200; line-height:1; }

.yy-status{
  position:absolute; top:calc(var(--pad) + 8px); right:var(--pad);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  opacity:0; animation:yy-in .9s .2s forwards ease;
}
.yy-status .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:#fff; margin-right:9px; vertical-align:middle;
  animation:yy-pulse 2.4s infinite ease-in-out;
}

.yy-nav{
  position:absolute; left:0; right:0; bottom:28px;
  display:flex; justify-content:center; gap:clamp(18px,3vw,30px);
  opacity:0; animation:yy-in .9s .55s forwards ease;
}
.yy-nav a{
  color:var(--muted); text-decoration:none; font-weight:300;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  transition:color .35s;
}
.yy-nav a:hover, .yy-nav a.on{ color:var(--ink); }

/* ---- centered stage (Home / Studio / Join) ---- */
.yy-stagecenter{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:center; justify-content:center; padding:0 var(--pad);
}
.yy-hero-stack{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

/* particle globe (Home) */
.yy-globe{
  position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(84vh,94vw); height:min(84vh,94vw);
  -webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 76%,transparent 100%);
  opacity:0; animation:yy-in 2.2s .3s forwards ease;
}
.yy-globe canvas{ width:100%; height:100%; display:block; }
.yy-dim{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(60vh,84vw); height:min(60vh,84vw); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(8,8,8,.92), rgba(8,8,8,.5) 54%, rgba(8,8,8,0) 78%);
}

/* the prominent lockup */
.yy-lockup{
  display:flex; align-items:center; gap:clamp(18px,3.2vw,42px);
  opacity:0; animation:yy-up 1.1s .3s forwards cubic-bezier(.2,.7,.2,1);
}
.yy-lockup .yy-logo{ height:clamp(84px,15vh,150px); width:auto; object-fit:contain; }
.yy-lockup .x{ color:var(--faint); font-weight:200; font-size:clamp(28px,5vh,54px); line-height:1; }
.yy-lockup.sm .yy-logo{ height:clamp(46px,7.5vh,66px); }
.yy-lockup.sm .x{ font-size:clamp(18px,3vh,26px); }

.yy-tag{
  margin:clamp(22px,4vh,42px) 0 0; max-width:32ch;
  color:var(--muted); font-weight:300; font-size:15px; line-height:1.6; letter-spacing:.01em;
  opacity:0; animation:yy-up 1.1s .55s forwards cubic-bezier(.2,.7,.2,1);
}
.yy-cta{
  margin-top:clamp(26px,4.5vh,44px); display:inline-block; text-decoration:none; color:var(--ink);
  border:1px solid rgba(255,255,255,.22); border-radius:100px; padding:15px 34px;
  background:rgba(10,10,10,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  opacity:0; animation:yy-up 1.1s .75s forwards cubic-bezier(.2,.7,.2,1);
  transition:background .45s, color .45s, border-color .45s;
}
.yy-cta:hover{ background:#fff; color:#0a0a0a; border-color:#fff; }

/* ---- manifesto (thesis) ---- */
.yy-center{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; padding:0 var(--pad); }
.yy-statement{
  margin:0; max-width:18ch; color:var(--ink); font-weight:200;
  font-size:clamp(2.3rem, 6.2vw, 5.4rem); line-height:1.05; letter-spacing:-.025em;
}
.yy-statement span{ display:block; opacity:0; animation:yy-up 1.1s forwards cubic-bezier(.2,.7,.2,1); }
.yy-statement span:nth-child(1){ animation-delay:.35s; }
.yy-statement span:nth-child(2){ animation-delay:.55s; color:var(--muted); }
.yy-statement span:nth-child(3){ animation-delay:.75s; color:var(--faint); }

/* ---- drops (facts) ---- */
.yy-drops{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; justify-content:center;
  width:min(760px,100%); padding:0 var(--pad);
}
.yy-drops-h{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
  margin-bottom:38px; opacity:0; animation:yy-in 1s .3s forwards ease;
}
.yy-drop{
  display:grid; grid-template-columns:minmax(120px,190px) 1fr auto; align-items:baseline; gap:24px;
  padding:24px 0; border-top:1px solid var(--line);
  opacity:0; animation:yy-up 1s forwards cubic-bezier(.2,.7,.2,1);
}
.yy-drop:last-child{ border-bottom:1px solid var(--line); }
.yy-drop .season{ font-weight:200; font-size:clamp(1.7rem,3.6vw,2.7rem); letter-spacing:-.01em; }
.yy-drop .desc{ color:var(--muted); font-size:14px; font-weight:300; }
.yy-drop .desc .code{ color:var(--faint); margin-right:8px; }
.yy-drop .tag{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.yy-drop.live .season{ color:var(--ink); }
.yy-drop.live .tag{ color:var(--ink); }

/* ---- join (apply) ---- */
.yy-join-h{
  margin:clamp(24px,5vh,44px) 0 12px; font-weight:200; letter-spacing:-.025em;
  font-size:clamp(1.8rem,4.4vw,2.9rem);
  opacity:0; animation:yy-up 1s .5s forwards ease;
}
.yy-form{ display:flex; gap:10px; width:min(460px,84vw); margin-top:26px;
  opacity:0; animation:yy-up 1s .7s forwards ease; }
.yy-form input{
  flex:1; min-width:0; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink);
  padding:15px 20px; border-radius:100px; font-family:inherit; font-size:13px; outline:none;
  transition:border-color .3s, background .3s;
}
.yy-form input::placeholder{ color:var(--faint); }
.yy-form input:focus{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }
.yy-form button{
  background:#fff; color:#0a0a0a; border:none; border-radius:100px; padding:15px 26px; cursor:pointer;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:opacity .3s;
}
.yy-form button:hover{ opacity:.85; }
.yy-note{ margin-top:20px; font-size:11px; letter-spacing:.04em; color:var(--faint);
  opacity:0; animation:yy-in 1s .9s forwards ease; }
.yy-done{ color:var(--muted); font-weight:300; font-size:15px; margin-top:26px; }

@keyframes yy-in{ from{opacity:0} to{opacity:1} }
@keyframes yy-up{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@keyframes yy-pulse{ 0%,100%{opacity:1} 50%{opacity:.2} }

/* ---- responsive ---- */
@media (max-width:820px){
  .yy-lockup{ gap:20px; }
  .yy-lockup .yy-logo{ height:clamp(64px,11vh,110px); }
  .yy-drops{ width:100%; }
  .yy-drop{ grid-template-columns:1fr auto; }
  .yy-drop .desc{ grid-column:1 / -1; order:3; }
  .yy-form{ flex-direction:column; }
  .yy-form input, .yy-form button{ width:100%; }
  .yy-status{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-delay:0s !important; }
  [class^="yy-"],[class*=" yy-"]{ opacity:1 !important; }
}