:root{
  --bg:#050101;--text:#f6f3f1;--muted:#9c918c;--red:#ef2d1d;--red2:#ff5037;--orange:#ff8a43;--kick:#53fc18;--radius:19px;--ease:cubic-bezier(.2,.75,.2,1)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;min-height:100vh;color:var(--text);background:var(--bg);font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}img,video{max-width:100%}::selection{background:rgba(239,45,29,.9);color:#fff}

.intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#000;transition:opacity .5s var(--ease),visibility .5s var(--ease)}.intro.is-done{opacity:0;visibility:hidden;pointer-events:none}.intro__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.intro__vignette{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 24%,rgba(0,0,0,.13) 62%,rgba(0,0,0,.78) 100%)}

/* v4 uses the exact background video supplied by the user, optimized locally. */
.backdrop{position:fixed;inset:0;z-index:-10;overflow:hidden;pointer-events:none;background:#080101}.backdrop__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:1;filter:saturate(.96) contrast(1.03) brightness(.88);transform:translateZ(0)}.backdrop__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.14) 45%,rgba(0,0,0,.31) 100%)}.backdrop__vignette{position:absolute;inset:0;box-shadow:inset 0 0 150px 24px rgba(0,0,0,.40)}

.page{width:min(790px,calc(100% - 30px));margin:0 auto;padding:24px 0 52px}.hero{text-align:center;padding:8px 0 12px}.hero-stack{position:relative;width:min(330px,85vw);height:238px;margin:0 auto;display:grid;place-items:start center}.portrait-wrap{position:absolute;top:0;left:50%;width:205px;z-index:2;transform:translateX(-50%);animation:portraitFloat 7.2s ease-in-out infinite;will-change:transform}.portrait{display:block;width:100%;height:auto;filter:saturate(.63) contrast(.98) brightness(.95);user-select:none}.sss-wrap{position:absolute;z-index:4;left:50%;top:116px;width:430px;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,49,31,.33)) drop-shadow(0 0 19px rgba(173,21,11,.18))}.sss-loop{display:block;width:100%;height:auto;pointer-events:none;user-select:none}.identity{position:relative;margin-top:-1px}@keyframes portraitFloat{0%,100%{transform:translateX(-50%) translateY(0) rotate(-.15deg)}50%{transform:translateX(-50%) translateY(-5px) rotate(.2deg)}}

/* Smaller, v2-style Syne title, with restrained moving red/fire accents. */
.brand-title{position:relative;display:inline-grid;place-items:center;margin:0;padding:7px 17px 10px;font-family:"Syne",sans-serif;font-size:clamp(2.25rem,6vw,3.25rem);line-height:.9;font-weight:800;letter-spacing:-.07em;isolation:isolate}.brand-title__text{position:relative;z-index:2;background:linear-gradient(104deg,#f7f3f0 2%,#ff6750 25%,#bc1f16 43%,#ff9a55 58%,#f5efeb 77%,#d53525 96%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 7px 20px rgba(0,0,0,.55));animation:brandGradient 7.2s ease-in-out infinite}.brand-title__text::after{content:"CRISSSTEA";position:absolute;inset:0;color:transparent;background:linear-gradient(100deg,transparent 0 38%,rgba(255,255,255,.95) 47%,#ff3b28 52%,transparent 62%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:letterSweep 4.5s linear infinite;mix-blend-mode:screen}.brand-title__orbit{position:absolute;left:8px;right:8px;height:1px;overflow:hidden;opacity:.76;pointer-events:none}.brand-title__orbit::after{content:"";position:absolute;top:0;width:27%;height:100%;background:linear-gradient(90deg,transparent,#ff3827,#ff9652,transparent);filter:drop-shadow(0 0 6px rgba(255,46,29,.75));animation:orbitRun 3.2s linear infinite}.brand-title__orbit--one{top:0}.brand-title__orbit--two{bottom:1px;transform:scaleX(-1);opacity:.46}.brand-title__orbit--two::after{animation-duration:4.6s;animation-delay:-1.7s}.brand-title__spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#ff5136;box-shadow:0 0 8px #ff2e1c,34px 4px 8px rgba(255,77,43,.6),78px -3px 9px rgba(255,136,66,.35);pointer-events:none}.brand-title__spark--one{top:-2px;left:16%;animation:sparkOne 4.1s ease-in-out infinite}.brand-title__spark--two{bottom:0;right:18%;transform:scale(.75);animation:sparkTwo 5.3s ease-in-out infinite}.identity__sub{margin:11px 0 0;color:#d1c2bc;font-size:.67rem;font-weight:800;letter-spacing:.25em;text-transform:uppercase;text-shadow:0 3px 14px rgba(0,0,0,.75)}
@keyframes brandGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes letterSweep{from{background-position:145% 0}to{background-position:-115% 0}}@keyframes orbitRun{from{left:-31%}to{left:108%}}@keyframes sparkOne{0%,100%{transform:translateX(0);opacity:.25}50%{transform:translateX(95px);opacity:1}}@keyframes sparkTwo{0%,100%{transform:translateX(0) scale(.75);opacity:.3}50%{transform:translateX(-78px) scale(.75);opacity:.95}}

.section{margin-top:31px}.section-title{display:flex;align-items:center;gap:11px;margin:0 3px 11px}.section-title::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,#ff3827,rgba(255,56,39,0));box-shadow:0 0 8px rgba(255,52,32,.30)}.section-title h2{margin:0;font-family:"Syne",sans-serif;font-size:.78rem;letter-spacing:.14em;font-weight:800}.section-title--compact{margin-bottom:12px}.grid{display:grid;gap:11px}.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Cursor-reactive red accent inspired by the v1 interaction the user preferred. */
.link-card,.sponsor-card,.social-card,.giveaway-card{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.09);background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,46,28,0),transparent 65%),rgba(8,6,6,.73);box-shadow:0 14px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:perspective(820px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease),transform .15s ease-out}.link-card::before,.sponsor-card::before,.social-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(290px circle at var(--mx) var(--my),rgba(239,45,29,.18),rgba(125,15,10,.07) 33%,transparent 65%);transition:opacity .2s ease}.link-card::after,.sponsor-card::after,.social-card::after{content:"";position:absolute;inset:-1px;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;background:radial-gradient(145px circle at var(--mx) var(--my),#ff6044 0%,rgba(239,45,29,.82) 18%,transparent 69%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s ease}.link-card:hover::before,.sponsor-card:hover::before,.social-card:hover::before,.link-card:hover::after,.sponsor-card:hover::after,.social-card:hover::after{opacity:1}.link-card:hover,.sponsor-card:hover,.social-card:hover{border-color:rgba(255,77,48,.20);box-shadow:0 21px 50px rgba(0,0,0,.45),0 0 27px rgba(130,16,9,.08),inset 0 1px 0 rgba(255,255,255,.045)}.link-card:active,.sponsor-card:active,.social-card:active{transform:perspective(820px) scale(.983)}
.link-card{min-height:92px;border-radius:var(--radius);display:flex;align-items:center;padding:16px 18px;gap:14px}.link-card__icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);flex:0 0 auto}.brand-icon img{width:23px;height:23px}.brand-icon--kick{background:rgba(83,252,24,.045)}.donation-icon{font-size:1.35rem;color:#ff6048}.link-card__copy{display:flex;min-width:0;flex:1;flex-direction:column;text-align:left}.link-card__copy strong{font-family:"Syne",sans-serif;font-size:.96rem;letter-spacing:.01em;display:flex;align-items:center;gap:8px}.link-card__copy small{margin-top:4px;color:var(--muted);font-size:.72rem}.arrow{font-size:1.15rem;color:#8f8783;transition:transform .22s var(--ease),color .22s}.link-card:hover .arrow,.sponsor-card:hover .arrow{transform:translate(3px,-3px);color:#fff}.rec-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff2d21;box-shadow:0 0 0 0 rgba(255,45,33,.62),0 0 10px rgba(255,45,33,.65);animation:recPulse 1.7s infinite}@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(255,45,33,.62),0 0 10px rgba(255,45,33,.65)}70%{box-shadow:0 0 0 8px rgba(255,45,33,0),0 0 5px rgba(255,45,33,.35)}100%{box-shadow:0 0 0 0 rgba(255,45,33,0),0 0 5px rgba(255,45,33,.2)}}

.sponsor-card{min-height:140px;border-radius:22px;display:grid;grid-template-columns:minmax(170px,1fr) minmax(235px,1.3fr) auto;align-items:center;gap:20px;padding:22px 23px;border-color:rgba(211,171,45,.20);background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,46,28,0),transparent 65%),linear-gradient(110deg,rgba(9,8,5,.82),rgba(8,5,5,.76))}.sponsor-card__accent{position:absolute;left:0;top:18%;bottom:18%;width:2px;background:linear-gradient(#e9c730,#a68913);box-shadow:0 0 14px rgba(219,184,35,.30)}.sponsor-card__brand{display:flex;align-items:center;gap:11px}.sponsor-card__logo{width:49px;height:49px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(214,179,31,.14))}.sponsor-card__brand>div{display:flex;flex-direction:column;text-align:left}.sponsor-card__overline{font-size:.56rem;color:#978d80;letter-spacing:.19em;font-weight:800}.sponsor-card__name{font-family:"Syne",sans-serif;font-size:1.14rem;letter-spacing:.02em}.sponsor-card__offer{text-align:left;display:flex;flex-direction:column;gap:2px}.sponsor-card__offer span{font-size:.67rem;color:#afa7a0;letter-spacing:.065em}.sponsor-card__offer strong{font-family:"Syne",sans-serif;font-size:1.48rem}.sponsor-card__offer em{font-style:normal;color:#f0cd30}.sponsor-card__offer b{color:#e8c82f}.sponsor-card__side{display:flex;align-items:center;gap:12px}.age-badge{padding:4px 7px;border:1px solid rgba(255,255,255,.11);border-radius:7px;font-size:.61rem;color:#9d9691}.arrow--big{font-size:1.4rem}.responsible-note{margin:6px 4px 0;text-align:right;color:#857b76;font-size:.57rem}.giveaway-card{display:none}

.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.social-card{min-height:105px;border-radius:16px;padding:15px;display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 10px;text-align:left}.social-card img{width:21px;height:21px;grid-row:1/3;opacity:.92}.social-card span{font-family:"Syne",sans-serif;font-size:.79rem;font-weight:800}.social-card small{color:#8d837f;font-size:.64rem}.footer{padding:39px 0 6px}.footer__line{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}.footer__row{display:flex;justify-content:space-between;align-items:center;padding-top:14px;color:#817873;font-size:.61rem;letter-spacing:.075em}.footer__row a{transition:color .2s}.footer__row a:hover{color:#eee}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .62s var(--ease),transform .62s var(--ease)}.reveal.is-visible{opacity:1;transform:none}.click-ripple{position:fixed;z-index:9998;width:8px;height:8px;border:1px solid rgba(255,65,43,.62);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:ripple .58s ease-out forwards}@keyframes ripple{to{width:58px;height:58px;opacity:0;border-color:rgba(255,80,45,0)}}

@media(max-width:680px){.page{width:min(100% - 22px,520px);padding-top:16px}.hero{padding-top:4px}.hero-stack{height:210px;width:min(300px,90vw)}.portrait-wrap{width:174px}.sss-wrap{top:99px;width:365px}.brand-title{font-size:clamp(2rem,11vw,2.8rem);padding-inline:13px}.identity__sub{font-size:.58rem;letter-spacing:.20em;margin-top:9px}.section{margin-top:27px}.grid--2{grid-template-columns:1fr}.link-card{min-height:82px;padding:14px 15px}.sponsor-card{grid-template-columns:1fr auto;gap:14px;padding:18px}.sponsor-card__offer{grid-column:1/3}.sponsor-card__side{grid-column:2;grid-row:1}.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.responsible-note{text-align:left;margin-left:2px}.backdrop__video{width:178%;max-width:none;left:-39%;object-position:center center}.backdrop__shade{background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.17) 45%,rgba(0,0,0,.34) 100%)}}
@media(max-width:390px){.hero-stack{height:201px}.portrait-wrap{width:166px}.sss-wrap{top:94px;width:345px}.brand-title{font-size:2.05rem}.social-card{min-height:98px;padding:13px}.sponsor-card__name{font-size:1rem}.sponsor-card__logo{width:43px;height:43px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro__video,.backdrop__video,.sss-loop,.portrait-wrap,.brand-title__text,.brand-title__text::after,.brand-title__orbit::after,.brand-title__spark,.rec-dot{animation:none!important}.magnetic{transform:none!important}}

/* ===== v5 desktop/background interaction fixes ===== */
html,body{background:#050101}
body{position:relative;isolation:isolate}
.backdrop{
  z-index:0 !important;
  background:#070101 url("assets/background-poster-hd.png") center/cover no-repeat !important;
}
.backdrop__video{
  z-index:0;
  opacity:.92 !important;
  filter:saturate(1.04) contrast(1.06) brightness(.74) !important;
}
.backdrop__shade{
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.24) 46%,rgba(0,0,0,.36) 100%) !important;
}
.backdrop__vignette{z-index:2;box-shadow:inset 0 0 130px 18px rgba(0,0,0,.42) !important}
.page{position:relative;z-index:2;width:min(900px,calc(100% - 44px))}
.intro{z-index:9999}

/* Keep head/logo identity, but prevent SSS from sitting over the wordmark. */
.hero{padding-top:4px}
.hero-stack{height:278px;width:min(350px,85vw)}
.portrait-wrap{width:205px}
.sss-wrap{top:122px;width:390px}
.identity{margin-top:-3px}
.brand-title{
  font-family:"Syne",sans-serif !important;
  font-size:clamp(1.95rem,4vw,2.55rem) !important;
  letter-spacing:-.065em !important;
  padding:5px 13px 8px !important;
}
.brand-title__text{
  background:linear-gradient(100deg,#f6f2f0 0%,#ff5248 24%,#d71919 45%,#ff3c34 62%,#f7f3f1 82%,#c90f14 100%) !important;
  background-size:260% 100% !important;
  animation:brandGradient 5.8s ease-in-out infinite !important;
}
.brand-title__text::after{
  background:linear-gradient(100deg,transparent 0 35%,rgba(255,255,255,.9) 44%,#ff2929 49%,#a90009 54%,transparent 64%) !important;
  background-size:250% 100% !important;
}
.brand-title__orbit::after{
  background:linear-gradient(90deg,transparent,#ff161d,#a90009,#ff3b3f,transparent) !important;
}
.brand-title__spark{background:#ff252b !important;box-shadow:0 0 9px #e50914,34px 4px 8px rgba(255,35,40,.55),78px -3px 9px rgba(150,0,8,.38) !important}
.identity__sub{margin-top:8px}
.section{margin-top:28px}

/* Strong desktop cursor tracking: red fill follows the pointer + obvious red outline. */
.link-card,.sponsor-card,.social-card,.giveaway-card{
  --mx:50%;--my:50%;
  border-color:rgba(255,255,255,.12) !important;
  background:
    radial-gradient(330px circle at var(--mx) var(--my),rgba(255,22,28,.00),transparent 66%),
    rgba(7,5,5,.78) !important;
  transition:border-color .16s ease,box-shadow .16s ease,transform .14s ease-out,background .16s ease !important;
}
.link-card::before,.sponsor-card::before,.social-card::before{
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(255,20,28,.31) 0%,rgba(180,0,12,.16) 28%,rgba(80,0,5,.06) 46%,transparent 69%) !important;
  opacity:0;
}
.link-card::after,.sponsor-card::after,.social-card::after{
  padding:1.5px !important;
  background:radial-gradient(175px circle at var(--mx) var(--my),#ff4d50 0%,#ff171d 24%,rgba(195,0,12,.93) 46%,transparent 72%) !important;
  filter:drop-shadow(0 0 7px rgba(255,10,20,.65));
}
.link-card:hover,.sponsor-card:hover,.social-card:hover{
  border-color:rgba(235,18,25,.82) !important;
  box-shadow:0 20px 48px rgba(0,0,0,.48),0 0 0 1px rgba(255,16,24,.34),0 0 25px rgba(210,0,12,.19),inset 0 0 28px rgba(150,0,9,.07) !important;
}
.link-card:hover::before,.sponsor-card:hover::before,.social-card:hover::before,
.link-card:hover::after,.sponsor-card:hover::after,.social-card:hover::after{opacity:1 !important}

@media(min-width:1100px){
  .page{width:min(920px,calc(100% - 64px));padding-top:18px}
  .link-card{min-height:96px}
  .social-card{min-height:108px}
}
@media(max-width:680px){
  .page{width:min(100% - 22px,520px)}
  .hero-stack{height:240px;width:min(310px,90vw)}
  .portrait-wrap{width:174px}
  .sss-wrap{top:106px;width:340px}
  .brand-title{font-size:clamp(1.8rem,9.8vw,2.35rem) !important}
  .backdrop__video{width:178%;max-width:none;left:-39%;opacity:.88 !important;filter:saturate(1.02) contrast(1.05) brightness(.70) !important}
  .backdrop__shade{background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.24) 45%,rgba(0,0,0,.38) 100%) !important}
}
.identity{z-index:6}

/* ===== v6 finishing pass ===== */
/* Intro stays cinematic but the source itself is small, crisp and centered instead of fullscreen. */
.intro{
  background:#000;
  place-items:center;
}
.intro__video{
  position:relative !important;
  inset:auto !important;
  width:min(245px,24vw) !important;
  height:auto !important;
  max-height:32vh;
  object-fit:contain !important;
  transform:translateZ(0);
  filter:drop-shadow(0 0 18px rgba(220,20,20,.16));
}
.intro__vignette{
  background:radial-gradient(circle at center,rgba(80,0,0,.08),transparent 29%,rgba(0,0,0,.62) 72%,#000 100%) !important;
}

/* Head floats independently; the SSS stays locked in its exact v5 position. */
.portrait-wrap{animation:none !important;}
.portrait{
  transform-origin:50% 60%;
  animation:headFloatV6 8.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes headFloatV6{
  0%,100%{transform:translate3d(0,0,0) rotate(-.12deg)}
  20%{transform:translate3d(3px,-3px,0) rotate(.10deg)}
  42%{transform:translate3d(-2px,-6px,0) rotate(-.08deg)}
  65%{transform:translate3d(-4px,-2px,0) rotate(.13deg)}
  82%{transform:translate3d(2px,2px,0) rotate(-.04deg)}
}

/* CRISSSTEA: keep the red word gradient, restore animated graphic detail around it. */
.brand-title{
  overflow:visible;
  isolation:isolate;
}
.brand-title::before,
.brand-title::after{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  height:1px;
  pointer-events:none;
  opacity:.68;
  filter:drop-shadow(0 0 7px rgba(255,18,25,.55));
  background:linear-gradient(90deg,transparent 0%,rgba(150,0,8,.16) 15%,#ff1e27 42%,rgba(255,255,255,.72) 50%,#c9000d 58%,rgba(150,0,8,.16) 85%,transparent 100%);
  background-size:240% 100%;
  animation:titleRail 4.4s linear infinite;
}
.brand-title::before{top:-4px;}
.brand-title::after{bottom:-2px;animation-direction:reverse;animation-duration:5.6s;opacity:.42;}
@keyframes titleRail{to{background-position:-240% 0}}

.brand-title__accent{
  position:absolute;
  display:block;
  width:24px;
  height:10px;
  pointer-events:none;
  opacity:.72;
  z-index:1;
}
.brand-title__accent::before,
.brand-title__accent::after{
  content:"";
  position:absolute;
  background:#ff2028;
  box-shadow:0 0 7px rgba(255,18,28,.62);
}
.brand-title__accent::before{width:18px;height:1px;}
.brand-title__accent::after{width:1px;height:7px;}
.brand-title__accent--tl{left:-14px;top:-8px;animation:accentTL 5.1s ease-in-out infinite;}
.brand-title__accent--tr{right:-14px;top:-8px;transform:scaleX(-1);animation:accentTR 4.6s ease-in-out infinite;}
.brand-title__accent--bl{left:-14px;bottom:-7px;transform:scaleY(-1);animation:accentTR 5.7s ease-in-out infinite reverse;}
.brand-title__accent--br{right:-14px;bottom:-7px;transform:scale(-1);animation:accentTL 4.9s ease-in-out infinite reverse;}
@keyframes accentTL{0%,100%{opacity:.28;translate:0 0}45%{opacity:.95;translate:8px 0}70%{opacity:.55;translate:3px 2px}}
@keyframes accentTR{0%,100%{opacity:.36;translate:0 0}38%{opacity:.9;translate:6px 1px}72%{opacity:.48;translate:1px -1px}}

.brand-title__orbit{left:-10px !important;right:-10px !important;overflow:visible !important;}
.brand-title__orbit::after{width:32% !important;filter:drop-shadow(0 0 8px rgba(255,18,24,.76)) !important;}
.brand-title__spark{width:3px !important;height:3px !important;}
.brand-title__spark--one{top:-8px !important;}
.brand-title__spark--two{bottom:-6px !important;}

/* The cursor carries a clearly visible red glow through every interactive card. */
.link-card,.sponsor-card,.social-card,.giveaway-card{
  background:
    radial-gradient(215px circle at var(--mx) var(--my),rgba(255,20,28,.00) 0%,rgba(135,0,8,.00) 44%,transparent 70%),
    rgba(7,5,5,.79) !important;
}
.link-card::before,.sponsor-card::before,.social-card::before{
  background:
    radial-gradient(190px circle at var(--mx) var(--my),rgba(255,26,33,.46) 0%,rgba(205,0,14,.27) 25%,rgba(100,0,7,.10) 48%,transparent 72%) !important;
  filter:blur(.2px);
  transition:opacity .12s ease !important;
}
.link-card::after,.sponsor-card::after,.social-card::after{
  background:radial-gradient(205px circle at var(--mx) var(--my),#ff6268 0%,#ff151e 20%,#b9000c 43%,rgba(140,0,8,.34) 58%,transparent 72%) !important;
}
.link-card:hover,.sponsor-card:hover,.social-card:hover{
  border-color:rgba(255,28,35,.94) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.52),0 0 0 1px rgba(255,20,28,.40),0 0 30px rgba(195,0,13,.25),inset 0 0 38px rgba(150,0,10,.10) !important;
}
.link-card:hover::before,.sponsor-card:hover::before,.social-card:hover::before{opacity:.92 !important;}

/* Social grid is now deliberately utility-first: icon + platform name only. */
.social-card{
  min-height:86px !important;
  grid-template-columns:27px 1fr !important;
  grid-template-rows:1fr !important;
  gap:10px !important;
}
.social-card img{grid-row:auto !important;}
.social-card span{align-self:center;font-size:.82rem !important;}
.social-card small{display:none !important;}

@media(max-width:680px){
  .intro__video{width:min(175px,42vw) !important;max-height:24vh;}
  .brand-title::before,.brand-title::after{left:-8px;right:-8px;}
  .brand-title__accent--tl,.brand-title__accent--bl{left:-5px;}
  .brand-title__accent--tr,.brand-title__accent--br{right:-5px;}
  .social-card{min-height:78px !important;}
}

@media(prefers-reduced-motion:reduce){
  .portrait,.brand-title::before,.brand-title::after,.brand-title__accent{animation:none !important;}
}

/* ===== v7 final polish ===== */
/* Intro: use the supplied SSS source as a crisp transparent mark, not fullscreen video. */
.intro{
  display:grid;
  place-items:center;
  background:#000 !important;
  overflow:hidden;
}
.intro__video{display:none !important;}
.intro__logo{
  position:relative;
  z-index:2;
  width:min(330px,28vw);
  max-width:68vw;
  height:auto;
  opacity:0;
  transform:scale(.92);
  filter:drop-shadow(0 0 18px rgba(235,22,28,.30)) drop-shadow(0 0 42px rgba(125,0,8,.18));
  animation:introLogoV7 1s cubic-bezier(.2,.72,.22,1) both;
  will-change:opacity,transform;
}
.intro__vignette{
  z-index:1;
  background:radial-gradient(circle at center,rgba(120,0,8,.09),transparent 31%,rgba(0,0,0,.72) 74%,#000 100%) !important;
}
@keyframes introLogoV7{
  0%{opacity:0;transform:scale(.90)}
  24%{opacity:1;transform:scale(1)}
  64%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.97)}
}

/* Wordmark: unmistakably readable CRISSSTEA, styled like the early versions.
   No frame/rectangle around it — only moving red light inside the letters + a soft glow. */
.brand-title{
  position:relative !important;
  display:inline-block !important;
  margin:0 !important;
  padding:0 .12em .05em !important;
  overflow:visible !important;
  isolation:isolate;
  font-family:"Syne",sans-serif !important;
  font-size:clamp(2.05rem,4.35vw,2.82rem) !important;
  line-height:.94 !important;
  font-weight:800 !important;
  letter-spacing:-.072em !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
.brand-title::before{
  content:"CRISSSTEA" !important;
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  color:rgba(224,12,20,.20) !important;
  background:none !important;
  filter:blur(11px) !important;
  transform:translateY(3px) !important;
  opacity:.95 !important;
  pointer-events:none;
  animation:titleGlowBreatheV7 3.8s ease-in-out infinite !important;
}
.brand-title::after{
  content:"" !important;
  position:absolute !important;
  left:13% !important;
  right:13% !important;
  top:auto !important;
  bottom:-8px !important;
  height:10px !important;
  background:linear-gradient(90deg,transparent,rgba(138,0,8,.16),rgba(247,24,31,.48),rgba(138,0,8,.16),transparent) !important;
  background-size:190% 100% !important;
  border:0 !important;
  border-radius:999px !important;
  filter:blur(8px) !important;
  opacity:.72 !important;
  pointer-events:none;
  animation:titleUnderGlowV7 4.4s ease-in-out infinite !important;
}
.brand-title__text{
  position:relative !important;
  z-index:2 !important;
  display:inline-block !important;
  color:transparent !important;
  background:linear-gradient(96deg,
    #f6f3f1 0%,
    #ffffff 28%,
    #ff4248 42%,
    #b9000c 50%,
    #ff323b 58%,
    #ffffff 72%,
    #f0ece9 100%) !important;
  background-size:250% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  filter:drop-shadow(0 4px 13px rgba(0,0,0,.62)) !important;
  animation:brandSweepV7 6.6s linear infinite !important;
}
.brand-title__text::after{
  content:"CRISSSTEA" !important;
  position:absolute !important;
  inset:0 !important;
  color:transparent !important;
  background:linear-gradient(105deg,transparent 0 39%,rgba(255,255,255,.92) 46%,#ff252d 51%,transparent 60%) !important;
  background-size:280% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  mix-blend-mode:screen !important;
  opacity:.8 !important;
  animation:brandShineV7 4.8s linear infinite !important;
  pointer-events:none;
}
@keyframes brandSweepV7{0%{background-position:0% 0}100%{background-position:250% 0}}
@keyframes brandShineV7{0%{background-position:250% 0}100%{background-position:-30% 0}}
@keyframes titleGlowBreatheV7{0%,100%{opacity:.56;transform:translateY(3px) scale(.995)}50%{opacity:1;transform:translateY(3px) scale(1.015)}}
@keyframes titleUnderGlowV7{0%,100%{background-position:0% 0;opacity:.45}50%{background-position:190% 0;opacity:.82}}

@media(max-width:680px){
  .intro__logo{width:min(240px,54vw);max-width:72vw;}
  .brand-title{font-size:clamp(1.95rem,10vw,2.45rem) !important;}
}
@media(prefers-reduced-motion:reduce){
  .intro__logo,.brand-title::before,.brand-title::after,.brand-title__text,.brand-title__text::after{animation:none !important;}
  .intro__logo{opacity:1;transform:none;}
}

.live-grid--single{grid-template-columns:1fr}


/* ===== Responsive finishing pass ===== */
/* A single timeline includes both fades: the page is fully visible at 1000ms. */
.intro{pointer-events:none;transition:none;animation:introScreen 1s ease both}
.intro__logo{width:clamp(190px,24vw,300px);animation:introMark 1s cubic-bezier(.22,.68,.25,1) both}
@keyframes introScreen{0%,62%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes introMark{0%{opacity:0;transform:scale(.96)}28%,60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.025)}}
.reveal{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.reveal-pending{opacity:0;transform:translateY(8px)}

/* Shared outer edges and shared text/icon columns across the desktop grid. */
.live-grid--single{display:grid;grid-template-columns:minmax(0,1fr)}
.live-grid--single .link-card{width:100%;min-height:104px}
.link-card{padding:18px 22px;gap:14px;transform:none}
.link-card__icon{width:46px;height:46px}
.link-card__copy{flex:1;min-width:0}
.link-card__copy strong{line-height:1.35}
.link-card__copy small{font-size:.75rem;line-height:1.5;color:#bdb0ab;overflow-wrap:anywhere}
.live-grid--single .link-card{border-color:rgba(83,252,24,.25)!important}
.brand-icon--kick{background:rgba(83,252,24,.06);border-color:rgba(83,252,24,.16)}
.link-card__copy .rec-dot{flex-shrink:0}
.sponsor-card{width:100%;min-height:152px;padding:24px 22px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:24px;transform:none;border-color:rgba(231,194,44,.28)!important}
.sponsor-card__brand{gap:14px;min-width:0}
.sponsor-card__logo{width:46px;height:46px;flex-shrink:0}
.sponsor-card__brand>div{min-width:0;text-align:left}
.sponsor-card__name{font-size:1.2rem}
.sponsor-card__offer{min-width:0;text-align:left;align-items:flex-start;line-height:1.5}
.sponsor-card__offer strong{font-size:1.55rem;line-height:1.25}
.sponsor-card__overline,.sponsor-card__offer span{color:#c0b5a8}
.sponsor-card__overline{font-size:.65rem}
.sponsor-card__offer span{font-size:.75rem}
.sponsor-card__side{position:static;gap:12px}
.responsible-note{width:100%;margin:9px 0 0;padding-inline:4px;text-align:center;font-size:.69rem;line-height:1.5;color:#b0a19b}
.social-card{grid-template-columns:24px minmax(0,1fr)!important;padding:18px 22px;gap:12px!important;transform:none}
.social-card span{line-height:1.45;overflow-wrap:anywhere}

/* Fine ash over a restrained pool of red light; logos retain their own colors. */
.link-card,.sponsor-card,.social-card{background:linear-gradient(120deg,rgba(23,9,11,.88),rgba(8,5,7,.87))!important;transition:border-color .2s ease,box-shadow .2s ease!important}
.link-card::before,.sponsor-card::before,.social-card::before{background:radial-gradient(190px circle at var(--mx) var(--my),rgba(241,32,48,.26),rgba(148,12,24,.10) 40%,transparent 72%)!important;pointer-events:none}
.link-card::after,.sponsor-card::after,.social-card::after{background:radial-gradient(180px circle at var(--mx) var(--my),#ff6970,#d6192b 28%,transparent 74%)!important;filter:none}
.card-dust{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;border-radius:inherit}
@media(hover:hover) and (pointer:fine){
  .link-card:hover,.sponsor-card:hover,.social-card:hover{border-color:rgba(238,45,62,.62)!important;box-shadow:0 16px 36px #0006,0 0 22px #b80c1c22!important}
}
a:focus-visible{outline:2px solid #ff8389;outline-offset:4px}
.backdrop__embers{position:absolute;inset:-30px;z-index:3;opacity:.28;background-image:radial-gradient(circle at 12% 76%,#ff646e 0 1px,transparent 1.8px),radial-gradient(circle at 78% 32%,#d93446 0 1px,transparent 1.6px),radial-gradient(circle at 43% 92%,#e7545e 0 .6px,transparent 1.3px);background-size:271px 313px,397px 419px,173px 227px;animation:ashDrift 20s ease-in-out infinite alternate;will-change:transform;pointer-events:none}
@keyframes ashDrift{from{transform:translate3d(0,12px,0)}to{transform:translate3d(10px,-20px,0)}}
.backdrop__shade{background:linear-gradient(180deg,rgba(4,0,1,.2),rgba(7,1,3,.30) 48%,rgba(4,0,1,.48))!important}
@media(max-width:680px){
  .live-grid--single .link-card{width:min(100%,430px);margin-inline:auto;min-height:96px}
  .link-card{padding:16px 18px}
  .sponsor-card{width:min(100%,430px);margin-inline:auto;min-height:0;grid-template-columns:minmax(0,1fr) auto;gap:18px 10px;padding:24px 18px}
  .sponsor-card__brand{grid-column:1;grid-row:1}
  .sponsor-card__side{grid-column:2;grid-row:1;align-self:center;gap:8px}
  .sponsor-card__offer{grid-column:1 / -1;grid-row:2;padding-left:60px;text-align:left;align-items:flex-start}
  .sponsor-card__name{font-size:1.12rem}
  .sponsor-card__offer strong{font-size:1.48rem}
  .social-card{padding:16px 18px}
  .responsible-note{max-width:430px;margin-inline:auto}
  .backdrop__embers{opacity:.18;animation-duration:26s}
  .page{padding-bottom:max(36px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .sponsor-card__brand{gap:10px}
  .sponsor-card__logo{width:38px;height:38px}
  .sponsor-card__name{font-size:.98rem}
  .sponsor-card__offer{padding-left:48px}
  .sponsor-card__side{gap:5px}
  .social-card{padding:14px 12px;gap:8px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .intro,.backdrop__video,.card-dust{display:none!important}
  .reveal-pending{opacity:1;transform:none}
}
.sss-wrap{max-width:100vw}

/* Requested spacing and intro corrections. */
.identity{margin-top:21px}
.sponsor-card__logo{transform:scale(1.65)}
@media(min-width:681px){
  .sponsor-card{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:11px}
  .sponsor-card__offer{padding-left:83px;padding-right:38px}
  .sponsor-card__side{position:absolute;right:22px;top:50%;transform:translateY(-50%)}
}
.intro,.intro__logo{animation-play-state:paused}
.intro--playing,.intro--playing .intro__logo{animation-play-state:running}
@media(prefers-reduced-motion:reduce){
  .intro{display:grid!important;animation:introScreen 1s ease both!important;animation-play-state:paused!important}
  .intro__logo{opacity:0;transform:none;animation:introMarkStill 1s ease both!important;animation-play-state:paused!important}
  .intro--playing,.intro--playing .intro__logo{animation-play-state:running!important}
}
@keyframes introMarkStill{0%{opacity:0}28%,60%{opacity:1}100%{opacity:0}}
/* Smooth REC pulse with a short, continuous fade cycle. */
.link-card .rec-dot{animation:recBlink .8s ease-in-out infinite!important}
@keyframes recBlink{
  0%,100%{opacity:1;box-shadow:0 0 9px rgba(255,45,33,.8)}
  50%{opacity:.12;box-shadow:0 0 2px rgba(255,45,33,.12)}
}


/* Gentle floating portrait, independent of the SSS logo. */
.portrait{animation:portraitHover 5.6s ease-in-out infinite!important;transform-origin:50% 65%;will-change:transform}
@keyframes portraitHover{
  0%,100%{transform:translate3d(0,0,0) rotate(-.4deg)}
  50%{transform:translate3d(2px,-10px,0) rotate(.4deg)}
}
/* Restore the original moving 720p backdrop with clearer tonal detail. */
.backdrop__video{
  display:block!important;
  width:100%;height:100%;left:0;max-width:none;
  opacity:1!important;
  filter:saturate(1.08) contrast(1.09) brightness(.92)!important;
  object-fit:cover;object-position:center;
}
.backdrop__shade{background:linear-gradient(180deg,rgba(4,0,1,.10),rgba(7,1,3,.19) 48%,rgba(4,0,1,.34))!important}
.backdrop__vignette{box-shadow:inset 0 0 110px 14px rgba(0,0,0,.32)!important}

/* Each platform owns the light, outline and dust palette of its card. */
a.magnetic[data-brand]{--accent:239,39,55;--accent-light:255,140,135;transition:border-color .22s ease,box-shadow .22s ease!important}
[data-brand="kick"]{--accent:83,252,24!important;--accent-light:173,255,145!important}
[data-brand="donation"]{--accent:255,85,112!important;--accent-light:255,173,187!important}
[data-brand="discord"]{--accent:115,124,255!important;--accent-light:186,191,255!important}
[data-brand="upgrader"]{--accent:231,194,44!important;--accent-light:255,232,132!important}
[data-brand="instagram"]{--accent:232,65,151!important;--accent-light:255,179,92!important}
[data-brand="tiktok"]{--accent:37,244,238!important;--accent-light:254,44,85!important}
[data-brand="youtube"]{--accent:255,40,48!important;--accent-light:255,142,145!important}
[data-brand="facebook"]{--accent:55,139,255!important;--accent-light:145,196,255!important}
[data-brand="steam"]{--accent:102,192,244!important;--accent-light:183,228,255!important}
[data-brand="trade"]{--accent:82,205,169!important;--accent-light:166,245,218!important}
a.magnetic[data-brand]::before{background:radial-gradient(190px circle at var(--mx) var(--my),rgba(var(--accent),.27),rgba(var(--accent),.09) 42%,transparent 73%)!important;transition:opacity .22s ease!important}
a.magnetic[data-brand]::after{background:radial-gradient(180px circle at var(--mx) var(--my),rgb(var(--accent-light)),rgb(var(--accent)) 28%,transparent 74%)!important}
@media(hover:hover) and (pointer:fine){
  a.magnetic[data-brand]:hover{border-color:rgba(var(--accent),.8)!important;box-shadow:0 16px 36px #0006,0 0 24px rgba(var(--accent),.18),inset 0 0 24px rgba(var(--accent),.045)!important}
}
a.magnetic[data-brand]:focus-visible{outline-color:rgb(var(--accent));border-color:rgb(var(--accent))!important;box-shadow:0 0 22px rgba(var(--accent),.16)!important}
a.magnetic[data-brand]:active{border-color:rgb(var(--accent))!important}
/* Ruby light overlay, clipped to the wordmark, with restrained ember detail. */
.brand-title__text{
  background:linear-gradient(105deg,#fff8f4 0%,#f7eeeb 34%,#ffc2be 53%,#ef707c 72%,#fff3ee 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  animation:none!important;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))!important;
}
.brand-title__text::after{
  background:linear-gradient(110deg,transparent 32%,rgba(188,17,43,.18) 41%,rgba(255,88,109,.55) 48%,rgba(255,245,231,.8) 51%,rgba(238,45,70,.32) 55%,transparent 65%)!important;
  background-size:300% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  opacity:.48!important;
  animation:titleRubyLight 7.5s ease-in-out infinite!important;
}
.brand-title::before{
  content:""!important;
  inset:-12px -16px -8px!important;
  background:radial-gradient(ellipse at 65% 58%,rgba(201,19,42,.20),rgba(107,7,23,.07) 45%,transparent 72%)!important;
  filter:blur(10px)!important;
  transform:none!important;opacity:.75!important;
  animation:none!important;
}
.brand-title::after{
  left:12%!important;right:12%!important;bottom:-6px!important;height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(168,23,40,.12) 18%,rgba(240,61,79,.48) 58%,rgba(255,181,168,.32) 66%,transparent)!important;
  filter:drop-shadow(0 0 5px rgba(221,37,57,.3))!important;
  opacity:.65!important;animation:none!important;
}
.brand-title__text::before{
  content:"";position:absolute;inset:-9px -8px;pointer-events:none;
  background:radial-gradient(circle at 9% 70%,#e75868 0 .7px,transparent 1.2px),radial-gradient(circle at 86% 15%,#ffb8a8 0 .65px,transparent 1.15px),radial-gradient(circle at 96% 76%,#c93950 0 .8px,transparent 1.3px);
  opacity:.45;
}
@keyframes titleRubyLight{
  0%,15%{background-position:130% 0}
  70%,100%{background-position:-30% 0}
}
@media(prefers-reduced-motion:reduce){
  .brand-title__text::after{animation:none!important;background-position:52% 0!important;opacity:.3!important}
}
.backdrop__video{filter:saturate(1.03) contrast(1.02) brightness(.90)!important}

/* Phone layout: single-line platform labels and a vertically centered sponsor mark. */
@media(max-width:680px){
  .social-card{padding-inline:12px;grid-template-columns:21px minmax(0,1fr)!important;column-gap:8px!important}
  .social-card span{font-size:clamp(.70rem,3.2vw,.82rem)!important;white-space:nowrap;overflow-wrap:normal}
  .sponsor-card__brand{padding-left:60px}
  .sponsor-card__logo{position:absolute;left:18px;top:50%;transform:translateY(-50%) scale(1.65)}
}
@media(max-width:360px){
  .sponsor-card__brand{padding-left:48px}
}