:root{
  color-scheme:dark;
  --gold:#c9aa6f;
  --ivory:#ebe2cf;
  --muted:#aaa79f;
  --mx:0px;
  --my:0px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020304}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ivory);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.background{
  position:fixed;inset:0;overflow:hidden;z-index:0;background:#020304;pointer-events:none;
}

/*
  v6 keeps the v5 coordinate correction:
  everything cinematic is locked to one shared 1672×941 scene that cover-scales.
*/
.scene-stage{
  position:absolute;left:50%;top:50%;
  width:max(100vw,calc(100vh * 1.7768331562));
  height:max(100vh,calc(100vw / 1.7768331562));
  transform:translate(-50%,-50%);
  overflow:hidden;
}
.space-bg{
  position:absolute;inset:0;
  background:url("assets/background/cosmic-background.webp") center/100% 100% no-repeat;
  opacity:1;
  filter:brightness(.16) contrast(1.08) saturate(.64);
  transform:translate(calc(var(--mx)*-.085),calc(var(--my)*-.07)) scale(1.004);
  transform-origin:center;
  transition:transform .22s ease-out;
}
.planet-rim-photo{display:none}

/* The planet is already there in darkness; we only reveal its edge with light. */
.rim-bloom{display:none}
.rim-bloom path{
  fill:none;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.rim-soft{
  stroke:rgba(239,204,138,.92);
  stroke-width:16;
  filter:url(#rimBlurSoft);
}
.rim-hard{
  stroke:rgba(255,245,217,.92);
  stroke-width:2.25;
  filter:url(#rimBlurHard);
}

/* exact flare coordinate preserved from v5 / approved concept */
.flare,
.sunrise-haze{
  position:absolute;
  left:23.20574163%;
  top:52.39107333%;
  pointer-events:none;
  mix-blend-mode:screen;
}
.sunrise-haze{
  opacity:0;
  z-index:4;
}
.sunrise-haze-wide{
  width:860px;height:620px;
  transform:translate(-42%,-48%);
  background:radial-gradient(ellipse at 18% 50%,
    rgba(248,223,168,.12) 0%,
    rgba(214,170,88,.05) 15%,
    rgba(114,89,49,.08) 31%,
    rgba(27,24,22,.03) 48%,
    transparent 68%);
  filter:blur(6px);
}
.sunrise-haze-local{
  width:420px;height:420px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(255,247,228,.11) 0%,
    rgba(240,204,133,.05) 16%,
    rgba(189,139,58,.07) 34%,
    transparent 62%);
}
.flare{
  z-index:7;
  opacity:0;
}
.flare-core{
  width:250px;height:250px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(255,255,250,1) 0 1.1%,
    rgba(255,248,226,1) 2.2%,
    rgba(249,221,165,.78) 4.7%,
    rgba(224,181,99,.34) 11%,
    rgba(193,140,55,.11) 25%,
    transparent 58%);
  filter:blur(.12px);
}
.flare-core::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fffdf4;
  box-shadow:
    0 0 10px 4px rgba(255,252,238,1),
    0 0 30px 10px rgba(245,213,151,.82),
    0 0 68px 22px rgba(214,166,80,.36);
}
.flare-beam-left{
  width:27%;height:1px;
  right:0;left:auto;
  transform:translateY(-50%);
  transform-origin:right center;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(200,154,75,.03) 30%,
    rgba(240,208,149,.13) 70%,
    rgba(255,249,230,.56) 100%);
  box-shadow:0 0 7px rgba(234,196,124,.14);
}
.flare-beam-right{
  width:2.1%;height:1px;
  left:0;
  transform:translateY(-50%);
  transform-origin:left center;
  background:linear-gradient(90deg,
    rgba(255,249,230,.42),
    rgba(231,190,112,.12) 48%,
    transparent 100%);
  box-shadow:0 0 5px rgba(234,196,124,.11);
}
.flare-vertical{
  width:1px;height:132px;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg,
    transparent,
    rgba(240,209,151,.08),
    rgba(255,248,224,.40),
    rgba(235,197,126,.07),
    transparent);
}
.stars{
  position:absolute;inset:0;z-index:1;
  opacity:.05;
  background-image:
    radial-gradient(circle,rgba(255,245,220,.55) 0 1px,transparent 1.2px),
    radial-gradient(circle,rgba(226,183,105,.32) 0 .7px,transparent 1px);
  background-size:171px 163px,251px 229px;
  background-position:29px 47px,101px 73px;
}
.dark-veil{
  position:absolute;inset:0;z-index:8;
  background:
    radial-gradient(ellipse at 24% 34%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.97) 100%),
    linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.84));
  opacity:1;
}
.vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 44%,transparent 40%,rgba(0,0,0,.24) 74%,rgba(0,0,0,.64) 100%),
    linear-gradient(180deg,rgba(0,0,0,.10),transparent 62%,rgba(0,0,0,.60));
}
.grain{
  position:absolute;inset:-50%;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation:none;
}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(1%,-.8%)}50%{transform:translate(-.7%,1%)}75%{transform:translate(.7%,.4%)}}

.topbar{
  position:fixed;z-index:20;left:0;right:0;top:0;height:92px;
  padding:0 clamp(35px,3vw,58px);
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:15px;color:#d0b477;font-size:11px;font-weight:600;letter-spacing:.34em}
.w-mark{width:34px;height:34px;display:block;object-fit:contain;object-position:center center;filter:drop-shadow(0 0 5px rgba(213,179,112,.10))}
.menu{width:48px;height:42px;display:grid;align-content:center;justify-items:end;gap:6px;border:0;background:none;padding:0;cursor:pointer}
.menu i{height:1px;background:#c8ac77;display:block;width:29px;opacity:.72}.menu i:nth-child(2){width:21px}.menu i:nth-child(3){width:25px}

.shell{
  position:relative;z-index:5;width:min(1360px,calc(100% - 64px));min-height:100vh;margin:0 auto;
  padding:84px 0 108px;display:flex;flex-direction:column;justify-content:center;transform:translateY(-28px);
}
.hero{text-align:center;margin:0 auto clamp(24px,3vh,32px)}
.wolf-head{display:block;width:60px;height:68px;object-fit:contain;object-position:center center;margin:0 auto 14px;filter:drop-shadow(0 0 9px rgba(218,184,116,.16))}
.title{display:none}
.title-wrap{margin:0;display:flex;justify-content:center;align-items:center;}
.title-wordmark{display:block;width:min(760px,78vw);height:auto;max-height:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.07)) drop-shadow(0 0 18px rgba(203,170,104,.08));}
.divider{display:flex;align-items:center;justify-content:center;gap:11px;margin:25px auto 19px}
.divider span{display:block;width:46px;height:1px;background:linear-gradient(90deg,transparent,rgba(194,160,96,.56))}
.divider span:last-child{transform:scaleX(-1)}
.divider i,.footer-diamond i{width:7px;height:7px;background:#bea169;transform:rotate(45deg);display:block}
.subtitle{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:.105em;color:rgba(215,211,203,.63)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.card{
  --accent:#c6a368;position:relative;min-height:378px;overflow:hidden;border-radius:10px;isolation:isolate;
  border:1px solid rgba(226,222,211,.32);
  background:linear-gradient(180deg,rgba(9,11,14,.61),rgba(3,4,6,.92));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 46px rgba(0,0,0,.32),0 0 26px color-mix(in srgb,var(--accent) 12%, transparent),0 0 64px color-mix(in srgb,var(--accent) 5%, transparent);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;
}
.card::before{
  content:"";position:absolute;inset:-1px;z-index:6;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 42%,white 10%),rgba(255,255,255,.16) 26%,transparent 50%,color-mix(in srgb,var(--accent) 30%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.84;pointer-events:none;transition:opacity .28s;
}
.card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 102%, color-mix(in srgb,var(--accent) 28%, transparent) 0%, color-mix(in srgb,var(--accent) 16%, transparent) 22%, transparent 58%),
    radial-gradient(circle at 50% 22%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 42%);
  opacity:1;
}
.art{position:absolute;inset:0;z-index:0;background-image:var(--art);background-position:center bottom;background-size:cover;background-repeat:no-repeat;opacity:1;filter:saturate(1.02) brightness(1.03) contrast(1.03);transition:.38s ease}
.art-mask{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(2,4,6,.97) 0%,rgba(3,5,7,.86) 20%,rgba(3,5,7,.62) 38%,rgba(3,5,7,.28) 56%,rgba(3,5,7,.07) 72%,rgba(2,3,4,0) 100%),
  radial-gradient(circle at 50% 11%,rgba(22,26,32,.18),transparent 42%)}
.edge-glow{position:absolute;z-index:2;left:7%;right:7%;bottom:-24px;height:64px;border-radius:50%;background:var(--accent);filter:blur(36px);opacity:.34;transition:.28s}
.card-copy{position:relative;z-index:3;min-height:378px;padding:39px 28px 27px;display:flex;flex-direction:column;align-items:center;text-align:center}
.card-icon{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:26px;
  color:color-mix(in srgb,var(--accent) 79%,white 7%);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  background:rgba(4,6,8,.36);box-shadow:inset 0 0 26px color-mix(in srgb,var(--accent) 7%,transparent);
  transition:.28s;
}
.card-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.card h2{margin:0;color:#f0ede6;font-size:23px;font-weight:500;letter-spacing:.18em;text-indent:.18em;text-transform:uppercase}
.card b{display:block;width:37px;height:2px;margin:17px 0;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 48%,transparent)}
.card p{margin:0;max-width:25ch;color:rgba(213,209,202,.70);font-size:14px;line-height:1.72}

.footer{
  position:absolute;z-index:10;left:0;right:0;bottom:14px;
  display:grid;place-items:center;text-align:center;color:rgba(193,188,177,.45);
}
.footer-diamond{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:13px}
.footer-diamond span{width:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(193,159,96,.30))}
.footer-diamond span:last-child{transform:scaleX(-1)}
.footer-diamond i{width:6px;height:6px;opacity:.82}
.socials{display:flex;align-items:center;justify-content:center;gap:22px;width:max-content;margin:0 auto 10px}
.socials a{width:20px;height:20px;display:grid;place-items:center;color:rgba(214,194,153,.59);transition:.2s}
.socials svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.socials a:hover{color:#d6b879;transform:translateY(-1px)}
.footer p{margin:0;font-size:10px}

@media(hover:hover) and (pointer:fine){
  .card:hover,.card:focus-visible{
    transform:translateY(-5px) scale(1.011);
    border-color:color-mix(in srgb,var(--accent) 78%,rgba(255,255,255,.28));
    box-shadow:inset 0 1px rgba(255,255,255,.07),0 26px 62px rgba(0,0,0,.38),0 0 42px color-mix(in srgb,var(--accent) 28%,transparent),0 0 88px color-mix(in srgb,var(--accent) 14%,transparent);
    outline:none;
  }
  .card:hover::before,.card:focus-visible::before{opacity:1}
  .card:hover .art,.card:focus-visible .art{opacity:1;filter:saturate(1.10) brightness(1.10) contrast(1.06);transform:scale(1.035)}
  .card:hover .edge-glow,.card:focus-visible .edge-glow{opacity:.62;transform:scaleX(1.24)}
  .card:hover .card-icon,.card:focus-visible .card-icon{
    border-color:color-mix(in srgb,var(--accent) 83%,transparent);
    color:color-mix(in srgb,var(--accent) 86%,white 14%);
    box-shadow:0 0 23px color-mix(in srgb,var(--accent) 19%,transparent),inset 0 0 18px color-mix(in srgb,var(--accent) 9%,transparent);
  }
}

/* ---------- v6 cinematic intro ---------- */
.fade-item,.card-intro{opacity:0}

/* 0: scene exists in darkness */
.play .space-bg{animation:spaceBase 2.75s cubic-bezier(.2,.74,.2,1) .00s both}
.play .dark-veil{animation:veilLift 2.9s cubic-bezier(.2,.74,.2,1) .10s both}

/* 1: sunrise grows naturally behind the planet edge */
.play .rim-bloom{animation:rimFade 2.15s ease-out .44s both}
.play .sunrise-haze-wide{animation:hazeWide 2.25s cubic-bezier(.18,.75,.18,1) .56s both}
.play .sunrise-haze-local{animation:hazeLocal 1.46s cubic-bezier(.16,.78,.16,1) 1.02s both}
.play .flare{animation:flareCine 1.18s cubic-bezier(.16,.76,.18,1) 1.34s both}
.play .stars{animation:starsRise 1.2s ease-out 1.44s both}

/* 2: branding emerges after the scene reveal */
.play .brand-intro{animation:fadeUp .62s ease-out 2.00s both}
.play .wolf-intro{animation:wolfReveal 1.00s cubic-bezier(.2,.8,.2,1) 2.18s both}
.play .title-intro{animation:titleReveal 1.12s cubic-bezier(.2,.8,.2,1) 2.34s both}
.play .subtitle-intro{animation:fadeUp .70s ease-out 2.68s both}
.play .card-intro{animation:cardReveal .62s cubic-bezier(.2,.8,.2,1) calc(2.95s + var(--index)*.13s) both}
.play .footer-intro{animation:footerFade .54s ease-out 3.48s both}

@keyframes spaceBase{
  0%{filter:brightness(.10) contrast(.98) saturate(.44)}
  34%{filter:brightness(.14) contrast(1.00) saturate(.52)}
  100%{filter:brightness(1) contrast(1.02) saturate(.86)}
}
@keyframes veilLift{
  0%{opacity:.94}
  44%{opacity:.86}
  100%{opacity:.20}
}
@keyframes rimFade{
  0%{opacity:0;transform:scale(1.003)}
  30%{opacity:.26}
  58%{opacity:.78}
  100%{opacity:.30;transform:scale(1)}
}
@keyframes hazeWide{
  0%{opacity:0;transform:translate(-42%,-48%) scale(.88)}
  30%{opacity:.34}
  100%{opacity:.18;transform:translate(-42%,-48%) scale(1.05)}
}
@keyframes hazeLocal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28)}
  24%{opacity:.84}
  100%{opacity:.18;transform:translate(-50%,-50%) scale(1.32)}
}
@keyframes flareCine{
  0%{opacity:0;filter:brightness(.42)}
  28%{opacity:1;filter:brightness(1.72)}
  60%{opacity:.86;filter:brightness(1.12)}
  100%{opacity:.52;filter:brightness(1)}
}
@keyframes starsRise{
  from{opacity:.02}
  to{opacity:.17}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes wolfReveal{from{opacity:0;transform:translateY(10px) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 9px rgba(218,184,116,.16))}}
@keyframes titleReveal{from{opacity:0;transform:translateY(10px) scale(.99);filter:blur(1.6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cardReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes footerFade{from{opacity:0}to{opacity:1}}

.short.play .space-bg{animation:spaceBase .56s ease-out 0s both}
.short.play .dark-veil{animation:veilLift .56s ease-out 0s both}
.short.play .rim-bloom{animation:rimFade .48s ease-out .04s both}
.short.play .sunrise-haze-wide{animation:hazeWide .42s ease-out .04s both}
.short.play .sunrise-haze-local{animation:hazeLocal .34s ease-out .10s both}
.short.play .flare{animation:flareCine .40s ease-out .12s both}
.short.play .stars{animation:starsRise .36s ease-out .12s both}
.short.play .brand-intro,.short.play .wolf-intro,.short.play .title-intro,.short.play .subtitle-intro{animation:fadeUp .38s ease-out .22s both}
.short.play .card-intro{animation:cardReveal .36s ease-out calc(.34s + var(--index)*.05s) both}
.short.play .footer-intro{animation:footerFade .30s ease-out .56s both}

.reduced .space-bg,.reduced .fade-item,.reduced .card-intro{
  opacity:1!important;animation:none!important;transform:none!important;filter:brightness(1) contrast(1.02) saturate(.86)!important;
}
.reduced .rim-bloom,.reduced .sunrise-haze,.reduced .flare,.reduced .dark-veil{display:none}
.reduced .stars{opacity:.17}
.reduced .grain{animation:none}

@media(max-width:1180px){
  .shell{width:min(930px,calc(100% - 44px));padding-top:114px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer{position:relative;bottom:auto;margin:31px 0 19px}
}
@media(max-width:640px){
  .topbar{height:72px;padding:0 18px}
  .brand{gap:9px;font-size:9px}
  .w-mark{width:34px;height:31px}
  .shell{width:min(480px,calc(100% - 26px));padding:93px 0 50px;justify-content:flex-start}
  .hero{margin-bottom:35px}
  .wolf-head{width:62px;height:70px;object-position:center center;margin-bottom:12px}
  .title{font-size:clamp(49px,14vw,67px);letter-spacing:.12em;text-indent:.12em}
  .title-wordmark{width:min(94vw,560px)}
  .subtitle{font-size:14px;letter-spacing:.07em}
  .divider{margin:20px auto 15px}
  .cards{grid-template-columns:1fr;gap:18px}
  .card,.card-copy{min-height:350px}
  .sunrise-haze-wide{width:640px;height:480px}
  .sunrise-haze-local{width:310px;height:310px}
}