/* ============================================================
   DRIP — Liquid Diamond hero + premium token layer  (v2 — POP)
   Loaded AFTER styles.css.
   ============================================================ */
:root{
  --paper:#ffffff; --mist:#f6f8fb; --frost:#eef2f8; --ink:#0b0c0e; --ink-soft:#4a4f57;
  --c:#5db4ff;
  --holo:linear-gradient(100deg,#ff3fa8 0%,#a066ff 20%,#3fa0ff 42%,#2ff0d8 62%,#b6ff6b 80%,#ffc93f 100%);
  --holo-conic:conic-gradient(from 0deg,#ff3fa8,#a066ff,#3fa0ff,#2ff0d8,#b6ff6b,#ffc93f,#ff3fa8);
  --glass:rgba(255,255,255,.5); --glass-line:rgba(255,255,255,.9);
  --shadow-soft:0 40px 90px -50px rgba(20,30,60,.55);
  --ease:cubic-bezier(.4,0,.1,1);
}
[hidden]{display:none!important;}

/* ---------- HERO ---------- */
.ld-hero{
  position:relative; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto;
  overflow:hidden; isolation:isolate; padding:80px 20px clamp(24px,5vh,60px);
  background:radial-gradient(130% 100% at 50% 30%, #ffffff 0%, #eef3fb 60%, #e2eaf6 100%);
}
.ld-viewer{grid-row:2; position:relative; z-index:2; width:min(560px,92vw); justify-self:center; align-self:stretch; min-height:30vh; touch-action:pan-y;}
.ld-viewer canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.viewer-hint{position:absolute; left:50%; bottom:2px; transform:translateX(-50%); z-index:3; font:700 10px/1 Montserrat,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); opacity:.5; pointer-events:none; transition:opacity .4s;}
.viewer-hint.gone{opacity:0;}
.ld-hero .viewer-hint{display:none;}   /* hint not needed on the home hero */

/* luminous holographic AURA blazing behind the gem — the pop */
.ld-aura{
  position:absolute; left:50%; top:42%; width:min(78vw,720px); aspect-ratio:1; transform:translate(-50%,-50%);
  z-index:1; pointer-events:none; border-radius:50%;
  background:var(--holo-conic); filter:blur(72px) saturate(1.35); opacity:.62;
  animation:auraSpin 18s linear infinite;
}
.ld-aura.two{width:min(52vw,460px); filter:blur(46px) saturate(1.5); opacity:.5; animation-duration:26s; animation-direction:reverse; mix-blend-mode:screen;}
@keyframes auraSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* holo pattern wash */
.ld-holobg{
  position:absolute; inset:-6%; z-index:0; pointer-events:none; opacity:.42;
  background:url(/assets/pattern-holo.png) center/520px repeat; mix-blend-mode:multiply; filter:saturate(1.2);
  -webkit-mask-image:radial-gradient(70% 62% at 50% 40%, #000 0%, transparent 82%);
          mask-image:radial-gradient(70% 62% at 50% 40%, #000 0%, transparent 82%);
  animation:ldDrift 26s ease-in-out infinite alternate;
}
@keyframes ldDrift{from{transform:translate3d(-12px,-8px,0)}to{transform:translate3d(12px,10px,0)}}

/* top zone — logo + eyebrow pinned at top (light area, black logo reads) */
.ld-top{grid-row:1; align-self:start; justify-self:center; z-index:6; display:flex; flex-direction:column; align-items:center; gap:11px; margin-top:10px; text-align:center;}
.ld-eyebrow{
  margin:0; font:800 12px/1 Montserrat,sans-serif; letter-spacing:.5em; text-transform:uppercase;
  color:var(--ink-soft); padding-left:.5em; text-shadow:0 2px 20px #fff, 0 0 30px #fff;
}

/* ---------- HUD (no card — text over the stage) ---------- */
.ld-hud{
  grid-row:3; position:relative; z-index:6; width:min(760px,94vw); margin:0 auto; text-align:center;
  animation:ldRise 1s var(--ease) both;
}
@keyframes ldRise{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
.ld-logo{width:min(172px,44vw); height:auto; display:block; margin:0; filter:drop-shadow(0 10px 26px rgba(20,30,70,.3));}
.ld-title{
  margin:0 0 6px; font:900 clamp(28px,4.6vw,50px)/1.0 Montserrat,sans-serif; letter-spacing:-.015em;
  background:var(--holo); background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:holoPan 7s linear infinite; filter:drop-shadow(0 3px 16px rgba(120,110,220,.32));
}
@keyframes holoPan{to{background-position:280% 0}}
.ld-sub{margin:0 0 20px; font:700 clamp(14px,2vw,18px)/1.35 Manrope,sans-serif; color:var(--ink); letter-spacing:.02em; text-shadow:0 2px 16px #fff;}

/* line chips */
.ld-chips{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:0 0 22px;}
.ld-chip{
  --a:var(--c); position:relative; cursor:pointer; text-decoration:none; font:800 12.5px/1 Montserrat,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); padding:11px 17px; border-radius:999px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.9), 0 12px 26px -16px rgba(20,30,70,.6); border:1px solid rgba(255,255,255,.95);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); -webkit-tap-highlight-color:transparent;
}
.ld-chip:hover,.ld-chip:focus-visible{transform:translateY(-3px); box-shadow:0 1px 0 #fff, 0 18px 32px -14px var(--a), 0 0 0 1.5px var(--a); outline:none;}
.ld-chip .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--a); margin-right:8px; vertical-align:middle; box-shadow:0 0 12px var(--a);}
.ld-chip.soon{opacity:.74;}
.ld-chip.soon .tag{font-size:9px; letter-spacing:.12em; opacity:.7; margin-left:6px;}

/* CTA */
.ld-cta{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  font:800 15px/1 Montserrat,sans-serif; letter-spacing:.05em; color:#fff; padding:16px 34px; border-radius:999px;
  background:linear-gradient(100deg, var(--c), #a066ff); background-size:180% 100%;
  box-shadow:0 20px 44px -18px var(--c), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .3s var(--ease), background-position .5s, box-shadow .3s; position:relative; overflow:hidden;
}
.ld-cta::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%); transform:translateX(-120%);}
.ld-cta:hover{transform:translateY(-3px); background-position:100% 0; box-shadow:0 28px 56px -18px var(--c);}
.ld-cta:hover::before{animation:sheen 1s var(--ease);}
@keyframes sheen{to{transform:translateX(120%)}}
.ld-cta .arw{transition:transform .3s var(--ease);} .ld-cta:hover .arw{transform:translateX(5px);}

/* marquee */
.ld-marquee{position:absolute; left:0; right:0; bottom:0; z-index:6; overflow:hidden; padding:11px 0; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.ld-track{display:inline-flex; white-space:nowrap; gap:32px; animation:ldMarq 26s linear infinite; will-change:transform;}
.ld-track span{font:800 12px/1 Montserrat,sans-serif; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); opacity:.55;}
.ld-track span::after{content:"◆"; margin-left:32px; color:var(--c); opacity:.7;}
@keyframes ldMarq{to{transform:translateX(-50%)}}

.ld-hero .scroll-cue{display:none;}

/* ---------- PRISM WARP page transition ---------- */
.ld-warp{position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0;
  background:var(--holo); background-size:300% 100%; mix-blend-mode:screen;}
.ld-warp.go{animation:warp .62s var(--ease) forwards;}
@keyframes warp{0%{opacity:0; transform:scale(1.3) rotate(-2deg); filter:blur(20px)}
  35%{opacity:.95}70%{opacity:.9}100%{opacity:0; transform:scale(1) rotate(0); filter:blur(0)}}

@media (max-width:600px){ .ld-marquee{display:none;} .ld-aura{top:38%;} }
@media (prefers-reduced-motion:reduce){
  .ld-aura,.ld-holobg,.ld-title,.ld-track,.ld-hud{animation:none!important;}
}