/* ============================================================
   COMPASSION 2026 — design system
   Electric / youthful / poster-energy
   ============================================================ */

/* ---- fonts (self-hosted, fully offline) ----
   Primary  : Poppins (geometric sans, bold-forward)
   Secondary: PP Editorial New Ultralight (elegant display serif) */
@font-face{font-family:'Poppins';src:url('/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'PP Editorial New';src:url('/fonts/ppeditorial-ultralight.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ---- tokens ---- */
:root{
  /* electric palette pulled from the reference boards */
  --pink:#FF2D95;
  --magenta:#E92EFB;
  --violet:#7A2FF7;
  --blue:#2E6BFF;
  --cyan:#16E7FF;
  --lime:#C6FF3D;
  --orange:#FF7A1A;
  --yellow:#FFD028;
  --red:#FF3B2E;

  --bg:#07060D;
  --bg-2:#0E0A1A;
  --panel:#130E22;
  --panel-2:#180F2C;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --ink:#F6F2FF;
  --muted:#B7AED1;
  --faint:#7C7396;

  --grad-hot:linear-gradient(100deg,var(--pink),var(--magenta) 42%,var(--violet) 78%,var(--blue));
  --grad-cool:linear-gradient(100deg,var(--cyan),var(--blue) 55%,var(--violet));
  --grad-punch:linear-gradient(100deg,var(--orange),var(--pink) 55%,var(--magenta));
  --grad-lime:linear-gradient(100deg,var(--lime),var(--cyan));

  /* palindrome gradients for SEAMLESS looping animation (start colour == end colour) */
  --flow-hot:linear-gradient(95deg,var(--pink),var(--magenta),var(--violet),var(--blue),var(--violet),var(--magenta),var(--pink));
  --flow-cool:linear-gradient(95deg,var(--cyan),var(--blue),var(--violet),var(--blue),var(--cyan));
  --flow-punch:linear-gradient(95deg,var(--orange),var(--pink),var(--magenta),var(--pink),var(--orange));
  --flow-lime:linear-gradient(95deg,var(--lime),var(--cyan),var(--lime));

  --r-sm:10px; --r:16px; --r-lg:26px; --r-xl:34px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.85);
  --ease:cubic-bezier(.19,1,.22,1);

  /* live mouse position, driven by JS (fallback = centre) */
  --mx:50%; --my:40%;
  --pointer-x:50vw; --pointer-y:50vh;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.55;overflow-x:hidden;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---- reactive backdrop: mesh + spotlight follows the cursor ---- */
.backdrop{position:fixed;inset:0;z-index:-2;background:var(--bg);overflow:hidden}
.backdrop::before{ /* spotlight tied to --mx/--my */
  content:'';position:absolute;inset:-20%;
  background:
    radial-gradient(38vw 38vw at var(--mx) var(--my), rgba(233,46,251,.22), transparent 60%),
    radial-gradient(30vw 30vw at calc(100% - var(--mx)) calc(var(--my) + 12%), rgba(46,107,255,.20), transparent 60%);
  transition:background .25s var(--ease);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;will-change:transform}
.blob.b1{width:46vw;height:46vw;background:var(--pink);top:-14vw;left:-8vw;animation:drift1 22s var(--ease) infinite alternate}
.blob.b2{width:40vw;height:40vw;background:var(--blue);bottom:-16vw;right:-8vw;animation:drift2 26s var(--ease) infinite alternate}
.blob.b3{width:28vw;height:28vw;background:var(--violet);top:40%;left:55%;animation:drift3 30s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(14vw,10vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-12vw,-8vh) scale(1.1)}}
@keyframes drift3{to{transform:translate(-16vw,6vh) scale(.85)}}

/* ---- film grain ---- */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================ layout */
.wrap{width:min(1200px,92vw);margin-inline:auto}
section{position:relative}
.eyebrow{font-family:'Poppins';font-weight:800;text-transform:uppercase;letter-spacing:.26em;
  font-size:.72rem;color:var(--cyan);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--cyan);display:inline-block}

/* ---- display type ---- */
.display{font-family:'PP Editorial New';font-weight:800;line-height:.9;letter-spacing:.005em;}
/* emphasis word inside serif headlines — bold sans + gradient, the "For THIS Generation" punch */
.grad-text{font-family:'Poppins';font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  background-image:var(--flow-hot);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;background-position:0% 50%;animation:flow 9s linear infinite}
.grad-text.cool{background-image:var(--flow-cool)}
.grad-text.punch{background-image:var(--flow-punch)}
.grad-text.lime{background-image:var(--flow-lime)}
/* shift by exactly one full tile of a palindrome gradient → no seam, continuous loop */
@keyframes flow{from{background-position:0% 50%}to{background-position:200% 50%}}
.outline-text{color:inherit}

/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  font-family:'Poppins';font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;
  padding:1.05em 1.9em;border-radius:100px;color:#0a0512;background:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s;will-change:transform;overflow:hidden;isolation:isolate}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background-image:var(--flow-hot);background-size:200% 100%;
  opacity:0;transition:opacity .3s;animation:flow 7s linear infinite}
.btn:hover{color:#fff;box-shadow:0 18px 45px -12px rgba(255,45,149,.6)}
.btn:hover::before{opacity:1}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn.ghost::before{border-radius:100px}
.btn.ghost:hover{color:#0a0512;border-color:transparent}
.btn.ghost:hover::before{opacity:1;background-image:var(--flow-lime)}
.btn.sm{padding:.7em 1.2em;font-size:.8rem}
.ui-arrow{display:inline-block;width:1.08em;height:1.08em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}
.ui-icon-label{display:inline-flex;align-items:center;gap:.42em}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---- chips / pills ---- */
.chip{display:inline-flex;align-items:center;gap:.5em;font-family:'Poppins';font-weight:700;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;padding:.5em 1em;border-radius:100px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--muted)}

/* ---- cards ---- */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--r-lg);position:relative;overflow:hidden}
.tilt{transform-style:preserve-3d;transition:transform .35s var(--ease)}
.tilt .tilt-in{transform:translateZ(40px)}

/* ---- photo frames (aspect-matched so portraits/landscapes never distort) ---- */
.photo{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line-2);
  background:#0c0a16;box-shadow:var(--shadow);isolation:isolate}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,6,13,.55));opacity:.7;transition:opacity .4s}
.photo:hover img{transform:scale(1.07)}
.photo:hover::after{opacity:.25}
.photo .tag{position:absolute;left:12px;bottom:10px;z-index:2;font-family:'Poppins';font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:#fff;opacity:0;transform:translateY(8px);
  transition:.4s var(--ease);text-shadow:0 2px 12px #000}
.photo:hover .tag{opacity:1;transform:none}
.photo.port{aspect-ratio:3/4}
.photo.land{aspect-ratio:4/3}
.photo.sq{aspect-ratio:1/1}
.photo.wide{aspect-ratio:16/9}
.photo.ring{outline:none}
.photo.ring::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;
  background:var(--flow-hot);background-size:200% 100%;animation:flow 7s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}

/* ---- glass nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;transition:transform .4s var(--ease)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:14px auto 0;width:min(1200px,94vw);padding:.6rem .7rem .6rem 1.2rem;
  border:1px solid var(--line);border-radius:100px;background:rgba(12,9,22,.55);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.nav.hidden{transform:translateY(-140%)}
.nav-logo{height:22px;width:auto;filter:drop-shadow(0 0 14px rgba(233,46,251,.4))}
.nav-links{display:flex;align-items:center;gap:.4rem}
.nav-links a{font-family:'Poppins';font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:.5rem .85rem;border-radius:100px;transition:color .25s,background .25s}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:.6rem}
.nav-burger span{width:22px;height:2px;background:var(--ink);transition:.3s var(--ease)}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}[data-delay="4"]{transition-delay:.32s}[data-delay="5"]{transition-delay:.4s}

/* ---- marquee ---- */
.marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:inline-flex;gap:2.4rem;align-items:center;will-change:transform;animation:marq 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:'Poppins';font-weight:800;text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:1}
.marquee-star{color:var(--lime);font-size:1.4rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line);margin-top:0;padding:3rem 0 2.5rem}
.footer-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.footer a.fl{color:var(--muted);display:block;padding:.25rem 0;transition:color .2s}
.footer a.fl:hover{color:var(--cyan)}

/* ---- forms (shared) ---- */
.field{margin-bottom:1.15rem;position:relative}
.field label{display:block;font-family:'Poppins';font-weight:700;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:.5rem}
.field .req{color:var(--pink)}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.turnstile-check{margin:1rem 0}.turnstile-check>p{margin-bottom:.45rem;font:700 .74rem 'Poppins';letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.input,.select{width:100%;padding:.95rem 1.1rem;border-radius:var(--r);background:rgba(255,255,255,.04);
  border:1.5px solid var(--line);color:var(--ink);font-size:1rem;transition:border-color .25s,background .25s,box-shadow .25s}
.input::placeholder{color:var(--faint)}
.input:focus,.select:focus{outline:none;border-color:var(--magenta);background:rgba(233,46,251,.06);
  box-shadow:0 0 0 4px rgba(233,46,251,.12)}
.select{appearance:none;color-scheme:dark;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23B7AED1' stroke-width='2'%3E%3Cpath d='M2 4l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1rem center;padding-right:2.6rem}
/* native dropdown list: keep it dark instead of the OS white */
.select option{background:#130E22;color:#F6F2FF}
.select option:checked{background:#241640}
.hint{font-size:.82rem;color:var(--faint);margin-top:.4rem}
.seg{display:flex;flex-wrap:wrap;gap:.6rem}
.seg-opt{flex:1;min-width:120px}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt label{display:flex;align-items:center;justify-content:center;text-align:center;height:100%;
  padding:.95rem 1rem;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--line);background:rgba(255,255,255,.03);
  cursor:pointer;font-family:'Poppins';font-weight:500;font-size:.95rem;letter-spacing:0;text-transform:none;
  color:var(--muted);margin:0;transition:.25s var(--ease)}
.seg-opt input:checked+label{box-shadow:none;color:#0a0512;background:var(--grad-hot);font-weight:700}
.seg-opt label:hover{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink)}
.cell-group-alternative{display:block;margin-top:1.1rem}
.cell-group-alternative::before{content:'OR';display:block;margin-bottom:.55rem;color:var(--faint);font-family:'Poppins';font-size:.68rem;font-weight:700;letter-spacing:.12em}
.cell-group-alternative .seg-opt{min-width:0}
.input:disabled{cursor:not-allowed;opacity:.45}

/* form support contacts */
.form-contact{margin-top:.35rem;padding:1rem;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.025);text-align:left}
.form-contact-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.form-contact-head span{font-family:'Poppins';font-weight:800;font-size:.62rem;line-height:1;text-transform:uppercase;
  letter-spacing:.14em;color:var(--cyan);white-space:nowrap}
.form-contact-head h3{font-family:'Poppins';font-weight:700;font-size:.82rem;line-height:1.3;color:var(--muted)}
.form-contact-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.form-contact-link{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.72rem .78rem;
  border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.18);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.form-contact-link>span:first-child{min-width:0;display:flex;flex-direction:column;gap:.08rem}
.form-contact-link b{font-family:'Poppins';font-size:.82rem;line-height:1.3}
.form-contact-link small{color:var(--muted);font-size:.72rem;line-height:1.3;white-space:nowrap}
.form-contact-action{display:inline-flex;align-items:center;gap:.3rem;color:var(--lime);font-family:'Poppins';font-weight:700;
  font-size:.62rem;white-space:nowrap}
.form-contact-link:hover{border-color:rgba(198,255,61,.48);background:rgba(198,255,61,.06);transform:translateY(-1px)}
.form-contact-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---- utility ---- */
.hidden{display:none!important}
.center{text-align:center}
.mono{font-variant-numeric:tabular-nums}
.noise-dots{background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:16px 16px}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:10000;
  padding:.9rem 1.4rem;border-radius:100px;background:rgba(20,14,34,.9);border:1px solid var(--line-2);
  backdrop-filter:blur(14px);font-weight:500;box-shadow:var(--shadow);max-width:90vw;text-align:center;
  transition:transform .5s var(--ease),opacity .5s;opacity:0}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.good{border-color:rgba(198,255,61,.5);box-shadow:0 10px 40px -10px rgba(198,255,61,.35)}
.toast.bad{border-color:rgba(255,59,46,.6);box-shadow:0 10px 40px -10px rgba(255,59,46,.4)}

/* ---- staff auth gate ---- */
.gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(80% 80% at 50% 0%,rgba(233,46,251,.14),var(--bg))}
.gate-card{width:min(400px,100%);background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:2.4rem;box-shadow:var(--shadow);text-align:center}
.gate-card img{height:24px;margin:0 auto 1.4rem}
.gate-card h1{font-family:'PP Editorial New';font-weight:800;font-size:1.9rem;line-height:.95}
.gate-card p{color:var(--muted);font-size:.92rem;margin:.5rem 0 1.6rem}
.gate-card .input{text-align:center;letter-spacing:.05em}
.gate-card .btn{width:100%;margin-top:1rem}
.gate-card .lock{width:44px;height:44px;border-radius:12px;background:var(--grad-hot);display:grid;place-items:center;margin:0 auto 1rem}
.gate-card .lock svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.gate-err{color:#ff8a80;font-size:.88rem;min-height:1.1em;margin-top:.7rem}

/* ---- staff topbar ---- */
.staffbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,3vw,2rem);border-bottom:1px solid var(--line);
  background:rgba(10,8,20,.7);backdrop-filter:blur(16px)}
.staffbar .brand{display:flex;align-items:center;gap:.8rem}
.staffbar .brand img{height:20px}
.staffbar .brand .tag{font-family:'Poppins';font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;color:var(--faint);border-left:1px solid var(--line-2);padding-left:.8rem}
.staffbar .tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* ---- spinner ---- */
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);
  border-top-color:var(--ink);animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

@media(max-width:520px){
  .form-contact-head{display:block}
  .form-contact-head span{display:block;margin-bottom:.35rem}
  .form-contact-links{grid-template-columns:1fr}
  .form-contact-link{padding:.8rem}
}