/* Dessant brand layer: lit-navy palette + "headlights on".
   The logo is the light source. Everything here is decorative and click-through:
   the page is visible and usable from the first frame, nothing waits on the light.
   Default CSS = the settled lit state. The inline gate in <head> adds html.dsnt-ignite
   once per session to play the sequence; js/dsnt-reveal.js adds html.dsnt-sweep otherwise. */
@property --dsnt-r { syntax: '<percentage>'; inherits: true; initial-value: 130%; }

:root {
  --dsnt-ground: #12264f;
  --dsnt-pool: #23498f;
  --dsnt-far: #0c1a38;
  --dsnt-panel: #1a3263;
  --dsnt-veil: rgba(5,11,26,.62);
  --dsnt-beam: #8fbcff;
  --dsnt-logo-sm: url(../images/dessant-logo-504.png);
  /* where the light comes from = centre of the header logo */
  --dsnt-lx: 128px;
  --dsnt-ly: 42px;
}
@media screen and (max-width: 980px) {
  :root { --dsnt-lx: calc(100% - 95px); --dsnt-ly: 34px; }
}

/* ---------- settled lit state ---------- */
body.dsnt-home {
  background-image: radial-gradient(130% 150% at var(--dsnt-lx) var(--dsnt-ly), var(--dsnt-pool) 0%, var(--dsnt-ground) 42%, var(--dsnt-far) 100%);
  background-attachment: fixed;
}
/* card sections sit on the body light instead of two flat bands */
body.dsnt-home #rec356374389, body.dsnt-home #rec356375678 { background-color: transparent !important; }
/* header: a pool of light behind the logo (Tilda owns background-color inline) */
#nav908308159 { background-image: radial-gradient(circle at var(--dsnt-lx) 50%, rgba(47,101,196,.5) 0, rgba(47,101,196,0) 420px); }
#rec908308159 .tmenu-mobile { background-image: radial-gradient(circle at var(--dsnt-lx) 50%, rgba(47,101,196,.6) 0, rgba(47,101,196,0) 300px); }

.dsnt-logo-link { position: relative; display: inline-block; line-height: 0; filter: drop-shadow(0 0 10px rgba(143,188,255,.35)); }
.dsnt-logo-link::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, var(--dsnt-beam) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0;
  -webkit-mask: var(--dsnt-logo-sm) center / 100% 100% no-repeat;
          mask: var(--dsnt-logo-sm) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}

/* light layers (home pages only): never intercept clicks */
.dsnt-light, .dsnt-light::before, .dsnt-light::after { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.dsnt-light { z-index: 2147483000; }
.dsnt-light::before, .dsnt-light::after { content: ''; opacity: 0; }
.dsnt-light::before { background: radial-gradient(circle at var(--dsnt-lx) var(--dsnt-ly), transparent calc(var(--dsnt-r, 130%) - 26%), var(--dsnt-veil) var(--dsnt-r, 130%)); }
.dsnt-light::after  { mix-blend-mode: screen;
  background: radial-gradient(circle at var(--dsnt-lx) var(--dsnt-ly), transparent calc(var(--dsnt-r, 130%) - 24%), rgba(143,188,255,.30) calc(var(--dsnt-r, 130%) - 7%), transparent var(--dsnt-r, 130%)); }

/* card glint */
body.dsnt-home .t694__cell::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(200,224,255,.55) 50%, transparent 62%) no-repeat;
  background-size: 280% 100%; background-position: 120% 0; mix-blend-mode: screen;
}
/* order the light reaches each card (distance from the logo) */
#rec356374389 .t694__col:nth-child(1) { --dsnt-d: 0; }
#rec356374389 .t694__col:nth-child(2) { --dsnt-d: 1; }
#rec356374389 .t694__col:nth-child(3) { --dsnt-d: 2; }
#rec356375678 .t694__col:nth-child(1) { --dsnt-d: 1; }
#rec356375678 .t694__col:nth-child(2) { --dsnt-d: 2; }
#rec356375678 .t694__col:nth-child(3) { --dsnt-d: 3; }

/* ---------- the one-time sequence (html.dsnt-ignite, ~1.9 s) ---------- */
html.dsnt-ignite .dsnt-logo-link img    { animation: dsntLogoIn 1s cubic-bezier(.3,.7,.2,1) .05s backwards; }
html.dsnt-ignite .dsnt-logo-link::after { animation: dsntSweep .8s ease-in-out .55s; }
html.dsnt-ignite .dsnt-logo-link        { animation: dsntBloom 1.9s ease-out; }
html.dsnt-ignite .dsnt-light::before    { animation: dsntSpread 1.25s cubic-bezier(.3,.1,.3,1) .6s backwards, dsntVeilFade 1.85s linear; }
html.dsnt-ignite .dsnt-light::after     { animation: dsntSpread 1.25s cubic-bezier(.3,.1,.3,1) .6s backwards, dsntFrontFade 1.85s linear; }
html.dsnt-ignite body.dsnt-home .t694__bg          { animation: dsntLift 1s ease-out calc(.75s + var(--dsnt-d, 0) * .1s) backwards; }
html.dsnt-ignite body.dsnt-home .t694__cell::after { animation: dsntGlint .8s ease-out calc(.85s + var(--dsnt-d, 0) * .1s); }

/* later page views: quick beam across the header logo */
html.dsnt-sweep .dsnt-logo-link::after { animation: dsntSweep 1.2s ease-in-out .25s; }

@keyframes dsntLogoIn {
  0%   { clip-path: inset(100% 71% 0 0); opacity: 0; }
  42%  { clip-path: inset(0 71% 0 0);    opacity: 1; }
  100% { clip-path: inset(0 0 0 0);      opacity: 1; }
}
@keyframes dsntSweep { 0% { background-position: 130% 0; opacity: 1; } 100% { background-position: -30% 0; opacity: 1; } }
@keyframes dsntBloom {
  0%, 28% { filter: drop-shadow(0 0 0 rgba(143,188,255,0)); }
  48%     { filter: drop-shadow(0 0 22px rgba(170,205,255,.95)); }
  100%    { filter: drop-shadow(0 0 10px rgba(143,188,255,.35)); }
}
@keyframes dsntSpread    { 0% { --dsnt-r: 0%; } 100% { --dsnt-r: 130%; } }
@keyframes dsntVeilFade  { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dsntFrontFade { 0%, 30% { opacity: 0; } 40%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dsntLift      { 0% { filter: brightness(.8) saturate(.85); } 45% { filter: brightness(1.22) saturate(1.05); } 100% { filter: none; } }
@keyframes dsntGlint     { 0% { background-position: 120% 0; opacity: 1; } 100% { background-position: -20% 0; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.dsnt-ignite .dsnt-logo-link, html.dsnt-ignite .dsnt-logo-link img, html.dsnt-ignite .dsnt-logo-link::after,
  html.dsnt-ignite .dsnt-light::before, html.dsnt-ignite .dsnt-light::after,
  html.dsnt-ignite body.dsnt-home .t694__bg, html.dsnt-ignite body.dsnt-home .t694__cell::after,
  html.dsnt-sweep .dsnt-logo-link::after { animation: none; }
}