/* Degerloch Supperclub — mobile-first, dark & gold, invitation-only */
:root{
  --ground:#0a0a0c;
  --gold:#c9a24e;
  --gold-lite:#f4e2a6;
  --ink:#eae3d4;
  --muted:#8f887a;
  --hair:rgba(201,162,78,.20);
  --serif:'Hoefler Text','Baskerville',Georgia,'Times New Roman',serif;
  --sans:'Optima','Gill Sans Nova','Gill Sans','Futura',system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#050506;
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Phone-width canvas — mobile only, centred on larger screens */
.device{
  max-width:440px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(201,162,78,.10), transparent 60%),
    radial-gradient(100% 50% at 50% 108%, rgba(201,162,78,.06), transparent 60%),
    linear-gradient(180deg,#0b0b0d,#08080a 40%,#0b0a0c);
  overflow:hidden;
}
.device::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.010) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.wrap{ position:relative; z-index:1; padding:0 26px; }

/* ---------- HERO ---------- */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:64px 26px 40px;
}
.emblem-shell{ position:relative; width:min(80vw,320px); aspect-ratio:1; }
.emblem{
  width:100%; height:100%; object-fit:contain; display:block;
  opacity:0; transform:scale(.86);
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.6)) blur(9px);
  animation:emblemIn 2200ms cubic-bezier(.19,1,.22,1) 250ms forwards;
}
/* Light sweep, clipped to the emblem's own shape via its alpha (so it stays
   on the round crest). The element stays fixed; only the gradient position
   animates, so the highlight glides across the logo rather than shifting it. */
.emblem-shell::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 42%,rgba(255,247,220,.50) 50%,transparent 58%);
  background-size:250% 100%; background-position:150% 0; background-repeat:no-repeat;
  mix-blend-mode:screen; opacity:0;
  -webkit-mask:url(emblem.png) center / contain no-repeat;
          mask:url(emblem.png) center / contain no-repeat;
  animation:shimmer 1600ms ease-out 1700ms 1 forwards;
}
@keyframes emblemIn{ to{ opacity:1; transform:scale(1); filter:drop-shadow(0 10px 40px rgba(0,0,0,.6)) blur(0); } }
@keyframes shimmer{ 0%{ opacity:0; background-position:150% 0; } 25%{ opacity:1; } 100%{ opacity:0; background-position:-50% 0; } }

.eyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); margin:26px 0 0; opacity:0; animation:rise 1100ms ease 1500ms forwards; }
.tagline{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--muted); margin:12px 0 0; opacity:0; animation:rise 1100ms ease 1750ms forwards; }
.scrollcue{ margin-top:44px; opacity:0; animation:rise 1100ms ease 2100ms forwards; display:flex; flex-direction:column; align-items:center; gap:9px; }
.scrollcue span{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }
.chev{ width:15px; height:15px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold); transform:rotate(45deg); animation:bob 2200ms ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5; } 50%{ transform:rotate(45deg) translate(3px,3px); opacity:1; } }
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- SCROLL REVEALS ---------- */
section.tell{ padding:16px 4px 20px; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.19,1,.22,1); }
.reveal.in{ opacity:1; transform:none; }
.rule{ width:44px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:0 auto 30px; }

.manifesto{ font-family:var(--serif); font-size:26px; line-height:1.42; text-align:center; color:var(--ink); margin:0 auto; max-width:19ch; text-wrap:balance; }
.manifesto b{ color:var(--gold-lite); font-weight:400; font-style:italic; }
.sub{ font-family:var(--sans); font-size:14.5px; line-height:1.7; color:var(--muted); text-align:center; margin:22px auto 0; max-width:30ch; }

/* ---------- WHAT YOU KNOW ---------- */
.known{ padding:14px 0 8px; }
.known h2{ font-family:var(--sans); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); text-align:center; font-weight:500; margin:0 0 4px; }
.known .whisper{ text-align:center; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:13.5px; margin:0 0 26px; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:3px; overflow:hidden; }
.fact{ background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.12)); padding:22px 14px; text-align:center; }
.fact .n{ font-family:var(--serif); font-size:30px; line-height:1;
  background:linear-gradient(180deg,#f7ecc4,#c9a24e 60%,#9c7a38); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold-lite); }
.fact .l{ font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:9px; }
.fact.wide{ grid-column:1 / -1; }
.secret{ text-align:center; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--muted); margin:30px auto 0; max-width:26ch; line-height:1.6; }
.secret b{ color:var(--ink); font-weight:400; font-style:normal; }

/* ---------- APPLY ---------- */
.apply-zone{ padding:52px 0 70px; text-align:center; }
.next-date{ margin:0 0 26px; display:flex; flex-direction:column; gap:5px; }
.next-date span{ font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }
.next-date strong{ font-family:var(--serif); font-weight:400; font-size:19px; color:var(--gold-lite); }
.cta{
  font-family:var(--sans); font-size:13px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:#12100a; background:linear-gradient(180deg,#f4e2a6,#c9a24e 55%,#a9853c);
  border:none; border-radius:2px; padding:19px 34px; cursor:pointer;
  box-shadow:0 10px 34px rgba(201,162,78,.24), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 16px 42px rgba(201,162,78,.34), inset 0 1px 0 rgba(255,255,255,.5); }
.cta:active{ transform:translateY(0); }
.cta:focus-visible{ outline:2px solid var(--gold-lite); outline-offset:4px; }
.apply-note{ font-family:var(--sans); font-size:11.5px; color:var(--muted); margin-top:18px; }
.closed-note{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--muted); line-height:1.6; }

footer{ border-top:1px solid var(--hair); padding:26px; text-align:center; }
footer p{ margin:0; font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#5f5a50; }

/* ---------- FORM SHEET ---------- */
.backdrop{ position:fixed; inset:0; background:rgba(3,3,4,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .4s ease; z-index:40; }
.backdrop.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:50%; bottom:0; transform:translate(-50%,102%);
  width:min(440px,100%); background:linear-gradient(180deg,#141216,#0d0c0f);
  border-top:1px solid var(--gold); border-radius:16px 16px 0 0;
  padding:12px 26px calc(30px + env(safe-area-inset-bottom)); z-index:50;
  box-shadow:0 -30px 80px rgba(0,0,0,.6); transition:transform .5s cubic-bezier(.19,1,.22,1);
  max-height:94vh; max-height:94svh; overflow:auto;
}
.sheet.open{ transform:translate(-50%,0); }
.grab{ width:38px; height:4px; border-radius:4px; background:var(--hair); margin:0 auto 20px; }
.sheet h3{ font-family:var(--serif); font-size:23px; color:var(--gold-lite); text-align:center; margin:0 0 4px; font-weight:400; }
.sheet .lead{ text-align:center; font-family:var(--sans); font-size:12.5px; color:var(--muted); margin:0 0 24px; line-height:1.6; }
.row{ margin-bottom:20px; }
label{ display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 8px; }
textarea,input[type=email]{
  width:100%; background:rgba(0,0,0,.35); border:1px solid var(--hair); border-radius:4px;
  color:var(--ink); font-family:var(--serif); font-size:16px; padding:13px 14px; resize:none; transition:border-color .25s ease;
}
textarea{ height:104px; line-height:1.5; }
textarea:focus,input[type=email]:focus{ outline:none; border-color:var(--gold); }
.counter{ text-align:right; font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:7px; letter-spacing:.05em; }
.counter.max{ color:#c98a4e; }

/* person switch (segmented) */
.segment{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--hair); border-radius:6px; overflow:hidden; }
.segment input{ position:absolute; opacity:0; width:0; height:0; }
.segment label{
  margin:0; text-align:center; padding:13px 8px; cursor:pointer; letter-spacing:.12em; font-size:12px;
  color:var(--muted); background:rgba(0,0,0,.25); transition:background .2s ease, color .2s ease; border:none;
}
.segment label + input + label{ border-left:1px solid var(--hair); }
.segment input:checked + label{ background:linear-gradient(180deg,#f4e2a6,#c9a24e); color:#12100a; font-weight:600; }
.segment input:focus-visible + label{ outline:2px solid var(--gold-lite); outline-offset:-2px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.err{ color:#e0a091; font-family:var(--sans); font-size:12.5px; margin:0 0 12px; min-height:0; }
.err:empty{ display:none; }
.submit{ width:100%; margin-top:6px; font-family:var(--sans); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:#12100a; background:linear-gradient(180deg,#f4e2a6,#c9a24e 55%,#a9853c); border:none; border-radius:2px; padding:17px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.submit:disabled{ opacity:.6; cursor:default; }
.submit:focus-visible{ outline:2px solid var(--gold-lite); outline-offset:3px; }
.fine{ font-family:var(--sans); font-size:10.5px; color:#5f5a50; text-align:center; margin:16px 0 0; line-height:1.6; }

.thanks{ text-align:center; padding:26px 6px 4px; display:none; }
.thanks.show{ display:block; animation:rise .8s ease forwards; }
.thanks .mark{ font-family:var(--serif); font-size:40px; color:var(--gold-lite); }
.thanks h3{ margin:14px 0 6px; }
.thanks p{ font-family:var(--sans); font-size:13px; color:var(--muted); line-height:1.6; max-width:26ch; margin:0 auto; }
.form-body.hide{ display:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .emblem{ opacity:1; transform:none; filter:drop-shadow(0 10px 40px rgba(0,0,0,.6)); }
  .eyebrow,.tagline,.scrollcue,.reveal{ opacity:1; transform:none; }
}