/* Master Cat — elegant teaser. Retint via :root. */
:root{
  --bg:#070708;
  --ink:#f3efe6;
  --muted:#8c8a84;
  --gold:#e7c879;
  --gold-hi:#f6e3a6;
  --gold-dim:#a98f4e;
  --teal:#58c6c0;
  --carn:#d2552b;
  --laser:#ff1c1c;
  --maxw:860px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.6 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---- intro ---- */
.intro{position:fixed;inset:0;z-index:999;background:var(--bg);
  display:flex;align-items:center;justify-content:center}
.intro-mark{width:auto;height:clamp(140px,30vh,210px);aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(210,85,43,.5)) drop-shadow(0 0 54px rgba(231,200,121,.18));
  animation:markIn 1s cubic-bezier(.2,.7,.2,1) both}
html.intro-done .intro{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
@keyframes markIn{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- stage ---- */
.stage{position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(20px,4vh,48px) 24px clamp(56px,9vh,72px);overflow:hidden}

/* soft radial aura + vignette for depth */
.aura{position:absolute;top:-8%;left:50%;transform:translateX(-50%);
  width:min(1100px,120vw);height:min(1100px,120vw);pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(231,200,121,.14),transparent 70%),
    radial-gradient(closest-side at 32% 60%,rgba(88,198,192,.08),transparent 70%),
    radial-gradient(closest-side at 70% 64%,rgba(210,85,43,.09),transparent 70%);
  filter:blur(6px);animation:breathe 9s ease-in-out infinite}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.72) 100%)}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.04)}}

/* ---- crest ---- */
.crest{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.mark{width:auto;height:clamp(150px,34vh,340px);aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 0 34px rgba(210,85,43,.42)) drop-shadow(0 0 80px rgba(231,200,121,.14));
  animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.wordmark{
  margin-top:clamp(4px,1vh,8px);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;
  font-size:clamp(44px,min(11vw,9vh),100px);
  line-height:1;
  letter-spacing:.5px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 42%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 40px rgba(88,198,192,.14);
}

/* ornamental rule */
.rule{display:flex;align-items:center;gap:12px;margin-top:clamp(12px,2.4vh,22px)}
.r-line{width:clamp(44px,12vw,96px);height:1px;
  background:linear-gradient(90deg,transparent,var(--laser),transparent)}
.r-dot{width:6px;height:6px;border-radius:50%;transform:rotate(45deg);
  background:var(--laser);box-shadow:0 0 10px rgba(255,28,28,.75)}

.tagline{margin-top:clamp(12px,2.4vh,22px);color:var(--ink);
  font-size:clamp(15px,2.4vw,19px);font-weight:400;letter-spacing:4px;
  text-transform:uppercase;opacity:.9}
.teaser{margin-top:clamp(8px,1.6vh,14px);color:var(--muted);
  font-size:13px;letter-spacing:3px;text-transform:uppercase}
.teaser .sep{color:var(--carn);margin:0 6px}

/* socials */
.socials{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(14px,3vh,30px)}
.social{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  color:var(--muted);border:1px solid rgba(231,200,121,.22);
  transition:color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.social svg{width:19px;height:19px}
.social:hover{color:var(--gold-hi);border-color:var(--gold);
  box-shadow:0 0 22px rgba(231,200,121,.25);transform:translateY(-2px)}

/* footer credit */
.credit{position:absolute;bottom:clamp(14px,2.5vh,26px);left:0;right:0;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12px;letter-spacing:2px;text-transform:uppercase}
.credit .tick{color:var(--gold);font-weight:600}
.credit .dim{color:var(--muted);opacity:.7}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity 1s ease,transform 1s ease}
html:not(.js) .reveal{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
/* stagger */
.wordmark.reveal{transition-delay:.12s}
.rule.reveal{transition-delay:.24s}
.tagline.reveal{transition-delay:.34s}
.teaser.reveal{transition-delay:.44s}
.socials.reveal{transition-delay:.54s}
.credit.reveal{transition-delay:.66s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
}