/* SYNTRA — home page and purchase ticket (on top of /space.css). Black and white, no motion. */

/* ---- Hero: the logo, floating in a soft light --------------------------------------- */
.hero{--hx:50%;--hy:40%;position:relative;display:grid;justify-items:center;text-align:center;gap:26px;padding:70px 24px 90px;overflow:hidden;
  background:radial-gradient(600px 420px at var(--hx) var(--hy),rgba(255,255,255,.06),transparent 70%)}
.hero h1{margin:0}
.hero-logo{position:relative;width:min(420px,78vw);aspect-ratio:560/359;display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hero-logo img{position:relative;width:100%;height:auto;filter:drop-shadow(0 20px 50px rgba(0,0,0,.9));animation:float 7s ease-in-out infinite}
.halo{position:absolute;inset:-30% -10%;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%);animation:breathe 6s ease-in-out infinite}
.ring{position:absolute;width:118%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.35) 82%,transparent 90%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));animation:turn 14s linear infinite;opacity:.7}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes breathe{50%{opacity:.55;transform:scale(1.06)}}
@keyframes turn{to{transform:rotate(360deg)}}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero h1.rise{animation-delay:.15s}
.hero-cta.rise{animation-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(6px)}}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.status{margin:0;font-size:14px;color:var(--text-2)}
.status:empty{display:none}
.status a{color:var(--text);margin-left:8px}
.center{text-align:center}

/* ---- Logo motion ------------------------------------------------------------------
   Intro: the logo assembles out of blur. Shine: a light sweeps across the logo's own shape.
   Scroll: --p (0 → 1, set by landing.js) sinks, shrinks and fades the hero logo while the
   nav logo takes over; --q brings the footer logo in. */
.hero-logo{animation:logo-in 1.6s cubic-bezier(.16,1,.3,1) both}
@keyframes logo-in{from{opacity:0;transform:scale(.6) rotate(-8deg);filter:blur(16px)}60%{opacity:1}}
.logo-scroll{--p:0;position:relative;display:grid;place-items:center;width:100%;height:100%;
  transform:translateY(calc(var(--p) * 160px)) scale(calc(1 - var(--p) * .5)) rotateX(calc(var(--p) * 35deg));
  opacity:calc(1 - var(--p) * .95);filter:blur(calc(var(--p) * 6px));will-change:transform,opacity}
.shine{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url('/assets/syntra-logo.png') center/100% 100% no-repeat;mask:url('/assets/syntra-logo.png') center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%) 0 0/300% 100% no-repeat;
  animation:shine 5s cubic-bezier(.45,0,.2,1) 1.4s infinite}
@keyframes shine{0%{background-position:120% 0}45%,100%{background-position:-20% 0}}
.hero-logo .shine{animation:shine 5s cubic-bezier(.45,0,.2,1) 1.4s infinite,float 7s ease-in-out infinite}
.cta-logo{--q:0;position:relative;width:200px;aspect-ratio:560/359;
  transform:scale(calc(.6 + var(--q) * .4)) rotate(calc((1 - var(--q)) * -12deg));opacity:calc(.2 + var(--q) * .8);filter:drop-shadow(0 16px 40px rgba(255,255,255,.08))}
.cta-logo img{width:100%;height:auto;animation:float 7s ease-in-out infinite}
.cta-logo .shine{animation:shine 5s cubic-bezier(.45,0,.2,1) infinite,float 7s ease-in-out infinite}
/* The small nav logo pops in once the big one has left the screen. */
.topnav.logo-handoff .brand img{animation:handoff .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes handoff{from{transform:scale(.3) rotate(-25deg);opacity:0;filter:drop-shadow(0 0 14px #fff)}}

/* ---- Anticheat marquee ---------------------------------------------------------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;margin:0;padding:0;list-style:none;animation:slide 32s linear infinite}
.marquee-track li{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text-2);white-space:nowrap}
.ac-dot{width:6px;height:6px;border-radius:50%;background:var(--text)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---- Scroll reveal ---------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.reveal.in{opacity:1;transform:none}

/* ---- Sections -------------------------------------------------------------------- */
.block{width:min(1160px,100%);margin:0 auto;padding:140px 24px 0}
.sec-head{max-width:640px;margin:0 0 40px}
.sec-head h2{margin:0}
.sec-head p{margin:12px 0 0;color:var(--text-2);font-size:16px}

/* ---- Demo ------------------------------------------------------------------------ */
.sim-tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;border:1px solid var(--line-2);border-radius:999px}
.sim-tabs button{min-height:36px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--text-2);font:600 14px var(--font)}
.sim-tabs button:hover{color:var(--text)}
.sim-tabs button[aria-selected=true]{background:var(--white);color:var(--ink)}
.sim-body{display:grid;grid-template-columns:minmax(0,520px) minmax(0,300px);gap:24px;align-items:start}
.demo{position:relative;overflow:hidden;background:#000;border:1px solid var(--line-2);border-radius:var(--r-lg)}
.demo-view{position:relative;overflow:hidden;width:100%}
.demo-view iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;pointer-events:none;color-scheme:normal;background:transparent}
.demo.live .demo-view iframe{pointer-events:auto}
.demo-cover{position:absolute;inset:0;border:0;background:linear-gradient(transparent 72%,rgba(0,0,0,.7));display:grid;align-items:end;justify-items:center;padding:18px}
.demo-cover span{padding:8px 14px;background:var(--white);color:var(--ink);border-radius:999px;font-size:13px;font-weight:600}
.demo.live .demo-cover{pointer-events:none;opacity:0}
.demo[data-mode=radial] .demo-cover{background:none;cursor:crosshair}
.demo[data-mode=radial] .demo-cover span{display:none}
.radial-toast{position:absolute;left:50%;top:14px;translate:-50% 0;padding:6px 14px;background:var(--white);color:var(--ink);border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none}
.radial-toast.show{opacity:1}
.sim-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 0;font-size:13px;color:var(--text-3)}
.sim-hint span{margin-right:10px}
.sim-side{display:grid;gap:20px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.sim-side.active{border-color:var(--line-3)}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.preset{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text-2);font-size:13px;text-align:left}
.preset .dot{width:12px;height:12px;border-radius:50%}
.preset.rainbow .dot{background:conic-gradient(#ff4fa3,#ffd84f,#4fffb0,#4f8bff,#ff4fa3)}
.preset:hover{color:var(--text);border-color:var(--line-3)}
.preset.on{color:var(--text);border-color:var(--text)}
.mini-chips{display:flex;flex-wrap:wrap;gap:6px}
.mini-chips .chip{min-height:30px;padding:0 10px;font-size:12px}
.color-row{display:flex;align-items:center;gap:12px;font:13px var(--mono);color:var(--text-2)}
.color-row input{width:42px;height:32px;padding:0;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;cursor:pointer}

/* ---- Features: icon cards with a light that follows the cursor ------------------------ */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.feature{position:relative;display:grid;gap:18px;padding:30px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .3s,transform .3s}
.feature::before,.plan::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.feature:hover,.plan:hover{border-color:var(--line-3)}
.feature:hover::before,.plan:hover::before{opacity:1}
.feature:hover .feature-ico{transform:scale(1.12) rotate(-6deg)}
.feature-ico{width:30px;height:30px;fill:none;stroke:var(--text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.feature h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}

/* ---- Pricing --------------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plan{position:relative;display:flex;flex-direction:column;gap:22px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .3s}
.plan.featured{border-color:transparent;isolation:isolate}
/* A slow light travels around the featured plan's border. */
.plan.featured::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),var(--line-2) 0 60%,#fff 75%,var(--line-2) 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:edge 5s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes edge{to{--a:360deg}}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan h3{margin:0;font-size:15px;font-weight:600;color:var(--text-2)}
.plan-badge{padding:3px 10px;border-radius:999px;background:var(--white);color:var(--ink);font-size:11px;font-weight:600}
.plan-length{display:flex;align-items:baseline;gap:8px}
.plan-length span{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1}
.plan-length small{font-size:14px;color:var(--text-3)}
.plan-price{font-size:18px;font-weight:600}
.plan-price:empty{display:none}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--text-2)}
.plan li{display:flex;gap:10px;align-items:center}
.plan li .ico{width:15px;height:15px;color:var(--text)}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin:40px 0 0;padding:0;list-style:none;counter-reset:step;font-size:14px;color:var(--text-2)}
.steps li{counter-increment:step;display:flex;align-items:center;gap:10px}
.steps li::before{content:counter(step);display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-3);border-radius:50%;font-size:12px;color:var(--text)}

/* ---- FAQ ------------------------------------------------------------------------- */
.faq{max-width:760px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 0;background:none;border:0;color:var(--text);font:600 16px var(--font);text-align:left}
.faq-sign{font-size:20px;font-weight:400;color:var(--text-3)}
.faq-item.open .faq-sign{color:var(--text)}
.faq-a p{margin:0 0 22px;color:var(--text-2);max-width:640px}

/* ---- CTA ------------------------------------------------------------------------- */
.cta{display:grid;justify-items:center;gap:22px;text-align:center}
.cta h2{margin:0}

/* Primary buttons catch a light when hovered. */
.btn.go{position:relative;overflow:hidden}
.btn.go::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn.go:hover::after{transform:translateX(120%)}

/* ---- Purchase ticket ------------------------------------------------------------- */
.ticket{width:min(1160px,100%);margin:0 auto;padding:56px 24px 0}
.ticket-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.ticket-head h1{margin:0}
.ticket-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.chat{display:flex;flex-direction:column;min-height:620px;padding:0;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line);font-size:14px}
.chat-head strong{font-weight:600}
.chat-head .hash{color:var(--text-3)}
#chat-count{margin-left:auto;color:var(--text-3);font-size:13px}
.messages{flex:1;min-height:420px;max-height:62vh;overflow:auto;padding:16px 22px;display:flex;flex-direction:column;gap:2px}
.message-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:8px 6px;border-radius:var(--r-sm)}
.message-row:hover{background:var(--surface-2)}
.message-row.compact{padding-top:0}
.message-row.compact .message-avatar,.message-row.compact .message-header{visibility:hidden;height:0}
.message-avatar{display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border-radius:50%;background:var(--surface-3);font-size:13px;font-weight:600}
.message-avatar img{width:100%;height:100%;object-fit:cover}
.message-header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.message-author{font-size:14px;font-weight:600}
.bot-tag{font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--white);color:var(--ink);vertical-align:2px}
.message-time,.message-jump{font-size:12px;color:var(--text-3);text-decoration:none}
.message-delivery{font-size:11px;color:var(--warn)}
.message-delivery.failed{color:var(--danger)}
.message-bubble{font-size:14.5px;overflow-wrap:anywhere;white-space:pre-wrap}
.message-bubble a{color:var(--text)}
.message-bubble img{max-width:min(360px,100%);margin-top:8px;border-radius:var(--r-sm)}
.message-day{display:flex;align-items:center;gap:12px;margin:14px 0 6px;font-size:12px;color:var(--text-3)}
.message-day::before,.message-day::after{content:"";flex:1;border-top:1px solid var(--line)}
.waiting{margin:auto;display:flex;align-items:center;gap:10px;color:var(--text-3)}
.wait-ring{width:8px;height:8px;border-radius:50%;background:var(--text-3)}
.composer{padding:14px 22px 20px;border-top:1px solid var(--line)}
.chat-form{display:grid;grid-template-columns:auto 1fr auto;gap:8px}
.chat-form .input{border-radius:999px}
.image-button{display:grid;place-items:center;width:46px;min-height:46px;border:1px solid var(--line-2);border-radius:50%;font-size:20px;color:var(--text-2);cursor:pointer}
.image-button:hover{border-color:var(--line-3);color:var(--text)}
.chat-error,.ticket-error{margin:8px 0 0;font-size:13px;color:var(--danger)}
.chat-error:empty,.ticket-error:empty{display:none}
.ticket-side{display:grid;gap:18px}
.ticket-side .mark{display:grid;place-items:center;padding:12px 0}
.ticket-side .mark img{width:96px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0}
.facts dt{font-size:13px;color:var(--text-3)}
.facts dd{margin:0;font-weight:600;text-align:right}
.discord-link{font-size:14px;color:var(--text);text-decoration:underline;text-underline-offset:4px}
.success{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.8);backdrop-filter:blur(6px)}
.success-panel{display:grid;justify-items:center;gap:14px;width:min(520px,100%);padding:44px 32px 32px;text-align:center}
.success-panel h2{margin:0}
.key-box{width:100%;display:grid;gap:12px;padding:18px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r)}
.key-box code{font-size:17px;border:0;background:none;word-break:break-all}
.key-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width:1000px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .sim-body,.ticket-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hero{padding:44px 16px 64px}
  .block{padding:96px 16px 0}
  .plans,.features{grid-template-columns:1fr}
    .messages{max-height:none}
  #nav-account-label{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .hero-logo img,.halo,.ring,.marquee-track,.cta-logo img,.plan.featured::after,.rise,.hero-logo,.shine,.logo-scroll{animation:none}
  .logo-scroll,.cta-logo{transform:none!important;opacity:1!important}
  .reveal{opacity:1;transform:none;transition:none}
}