/* Storm hero + "Lightning draws the site" (js/storm-video.js, js/draw-site.js, js/intro-gate.js) */

/* the storm canvas fades in over the CSS hero once the first frame is drawn */
.storm3d{opacity:0;transition:opacity 1.4s ease}
.storm3d.on{opacity:1}
.hero-bg{transition:opacity 1.4s ease}
/* a lighter fade on the left, so the storm shows through under the headline */
.hero.has-3d::after{transition:opacity 1s ease;background:
    linear-gradient(90deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,.24) 40%,transparent 62%),
    linear-gradient(0deg,#0a0a0a 0%,rgba(10,10,10,.85) 9%,transparent 34%)}
@media (max-width:860px){
  .hero.has-3d::after{background:linear-gradient(180deg,rgba(5,5,5,.25) 0%,rgba(5,5,5,.62) 42%,rgba(10,10,10,.9) 88%,#0a0a0a 100%)}
}

.hero[data-draw]{cursor:crosshair;-webkit-tap-highlight-color:transparent}
.hero[data-draw] a,.hero[data-draw] button{cursor:pointer}
.hero[data-draw="home"]{min-height:100vh;min-height:100svh}

/* a narrower headline column, so the drawing has real room beside it */
@media (min-width:1024px){
  .hero[data-draw] .hero-in > *{max-width:460px}
  .hero[data-draw] .hero-in > .hero-actions{max-width:540px}
  .hero[data-draw] h1{font-size:clamp(34px,3.3vw,56px)}
  .hero[data-draw] h1.h1-sub{font-size:clamp(30px,2.9vw,48px)}
  .hero[data-draw] .lead{font-size:clamp(16px,1.25vw,19px)}
}

/* ---------- home intro: nothing but the storm ----------
   The home hero always runs up under the nav (the nav sits on top of it), so
   when the intro ends the nav only fades in: nothing on the page shifts, and
   the welcome page's glide is the only movement. */
.hero[data-draw="home"]{margin-top:calc(-1 * var(--nav-h,68px));padding-top:var(--nav-h,68px)}
@media (max-width:860px){.hero[data-draw="home"]{padding-top:calc(var(--nav-h,68px) + 72px)}}
.nav{transition:opacity .7s ease}
html.intro,html.intro body{overflow:hidden;overscroll-behavior:none}
html.intro .nav{opacity:0;pointer-events:none}
.hero .hero-in{transition:opacity .7s ease}
html.intro .hero-in{opacity:0;pointer-events:none}
html.intro .hero-in *{animation-play-state:paused!important}
html.intro .hero.has-3d::after{opacity:0}

/* ---------- the drawing ---------- */
.ds-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ds-wrap{position:absolute;transition:opacity .8s ease}
.ds-wrap.float .ds-float{animation:dsFloat 7s ease-in-out infinite}
.ds-wrap.gliding .ds-float,.ds-wrap.growing .ds-float{animation-play-state:paused}
/* while it glides, the browser moves the whole drawing as one image (every line
   moves exactly together); it redraws crisp once it settles */
.ds-wrap.gliding{will-change:transform}
.ds-wrap.gone{opacity:0}
.ds-wrap.lit .ds-site{animation:dsLit .7s ease-out}
@keyframes dsFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes dsLit{0%{filter:brightness(1.6) drop-shadow(0 0 18px rgba(197,140,240,.7))}100%{filter:brightness(1)}}
.ds-site{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}

/* 0) lightning branches crawl out from the strike, each one sparking where it lands */
.ds-branches path{fill:none;stroke:#f6eeff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ds-site.draw .ds-branches path{stroke-dashoffset:0;opacity:0;transition:stroke-dashoffset var(--t) linear var(--s),opacity .5s ease var(--e)}
.ds-sparks circle{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center}
.ds-site.draw .ds-sparks circle{animation:dsSpark .55s ease-out var(--e) both}
@keyframes dsSpark{0%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.ds-site.still .ds-branches,.ds-site.still .ds-sparks{display:none}

/* 1) each piece traces itself from where it was hit (glowing), 2) colour fills in, 3) it comes alive */
.ds-lines .o{fill:none;stroke:#efe2ff;stroke-width:1.3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ds-site.draw .ds-lines .o{stroke-dashoffset:0;transition:stroke-dashoffset var(--t) cubic-bezier(.55,0,.3,1) var(--d)}
.ds-site.fill .ds-lines{opacity:.3;transition:opacity .9s ease}

.ds-texts .tx{fill-opacity:0;stroke-width:.6;stroke-opacity:.95;stroke-dasharray:420;stroke-dashoffset:420}
.ds-site.draw .ds-texts .tx{stroke-dashoffset:0;transition:stroke-dashoffset var(--t) ease var(--d)}
.ds-site.fill .ds-texts .tx{fill-opacity:1;stroke-opacity:0;transition:fill-opacity .5s ease var(--f),stroke-opacity .5s ease var(--f)}

.ds-fills .f{opacity:0}
.ds-site.fill .ds-fills .f{opacity:1;transition:opacity .6s ease var(--f)}

.ds-alive .al{opacity:0}
.ds-site.alive .ds-alive .al{opacity:1;transition:opacity .5s ease var(--a),transform .7s cubic-bezier(.2,.8,.2,1) var(--a)}
.ds-alive .pop{transform:translateY(12px)}
.ds-site.alive .ds-alive .pop{transform:none}
.ds-alive .grow-x{opacity:1;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.ds-site.alive .ds-alive .grow-x{transform:none;transition:transform 1s cubic-bezier(.2,.8,.2,1) var(--a)}
.ds-alive .ping{fill:none;stroke:#c58cf0;stroke-width:2;transform-box:fill-box;transform-origin:center}
.ds-site.alive .ds-alive .ping{opacity:0;animation:dsPing 1.9s ease-out var(--a) 3}
@keyframes dsPing{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(1.5)}}
.ds-site.alive .ds-alive .travel{animation:dsTravel 3.4s ease-in-out var(--a) infinite}
@keyframes dsTravel{0%{transform:translateX(0)}50%{transform:translateX(var(--dx))}100%{transform:translateX(0)}}

/* skipped or reduced motion: everything appears finished */
.ds-site.still *{transition:none!important}

/* narrow screens: the drawing builds over the storm, the text steps back */
.hero.ds-over .hero-in{opacity:.12}

/* ---------- the hint and the skip button ---------- */
.ds-hint{position:absolute;left:50%;bottom:28px;z-index:3;transform:translate(-50%,8px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;padding:13px 24px;border-radius:999px;white-space:nowrap;
  font:600 16px 'DM Sans',sans-serif;color:#f4eefc;letter-spacing:.01em;
  background:rgba(24,14,38,.62);border:1px solid rgba(197,140,240,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 18px rgba(197,140,240,.25);
  transition:opacity .6s ease,transform .6s ease}
.ds-hint.on{opacity:1;transform:translate(-50%,0)}
/* home intro: opens large in the middle, then shrinks down into place (draw-site.js sets --dy and --s) */
.ds-hint.big{transform:translate(-50%,var(--dy,0px)) scale(calc(var(--s,2) * .94));transition:opacity .8s ease,transform .8s ease}
.ds-hint.big.on{transform:translate(-50%,var(--dy,0px)) scale(var(--s,2))}
.ds-hint.shrink{transition:opacity .6s ease,transform 1.2s cubic-bezier(.65,0,.25,1)}
.ds-hint.snap{transition:none}
/* the glow breathes: eases up to full every 5s and back down, never off */
.ds-hint::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(214,170,250,.85);box-shadow:0 0 34px 6px rgba(197,140,240,.55),inset 0 0 14px rgba(197,140,240,.25);
  opacity:.15}
.ds-hint.on::before{animation:dsBreathe 5s ease-in-out infinite}
@keyframes dsBreathe{0%,100%{opacity:.15}50%{opacity:1}}
.ds-dot{width:10px;height:10px;border-radius:50%;background:#d6aafa;animation:dsDot 1.6s ease-out infinite}
@keyframes dsDot{0%{box-shadow:0 0 0 0 rgba(197,140,240,.7)}100%{box-shadow:0 0 0 12px rgba(197,140,240,0)}}
.ds-skip{position:absolute;right:20px;bottom:24px;z-index:3;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(20,14,30,.45);color:rgba(236,230,246,.75);font:500 12.5px 'DM Sans',sans-serif;
  opacity:0;pointer-events:none;transition:opacity .6s ease,color .2s,border-color .2s}
.ds-skip.on{opacity:1;pointer-events:auto}
.ds-skip:hover,.ds-skip:focus-visible{color:#fff;border-color:rgba(197,140,240,.6)}
@media (max-width:860px){.ds-hint{bottom:70px;font-size:15px;padding:12px 20px}.ds-skip{right:50%;transform:translateX(50%);bottom:20px}}

@media (prefers-reduced-motion:reduce){
  .ds-site *,.ds-wrap,.ds-dot,.ds-hint::before{animation:none!important;transition:none!important}
  .ds-hint::before{opacity:.6}
}