/* Homepage intro: the organisation's video plays full screen once per visit, then fades into the page.
   It only exists while <html> has the class "intro-on", which a tiny inline script in <head> sets
   before anything paints, so the page never flashes first. */

.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{display:block}

.intro{position:fixed;inset:0;z-index:2000;background:#f3f4f1;overflow:hidden;cursor:pointer;
  transition:opacity 1.1s cubic-bezier(.65,0,.35,1),visibility 0s 1.1s}
.intro video,.intro .intro-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* blurred copy fills the edges when the screen shape differs from the video (phones in portrait) */
.intro-bg{filter:blur(38px) saturate(1.2);transform:scale(1.25);opacity:.75}
.intro-main{object-fit:cover;filter:contrast(1.04) saturate(1.08);transition:transform 1.4s cubic-bezier(.65,0,.35,1),filter 1.4s cubic-bezier(.65,0,.35,1)}
@media (max-aspect-ratio:4/3){.intro-main{object-fit:contain}}

/* soft frame: hides the edges of the low-resolution video and gives a cinematic feel */
.intro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 58%,rgba(243,244,241,.55) 100%)}

/* progress line and skip control */
.intro-bar{position:absolute;z-index:2;inset-inline:0;bottom:0;height:3px;background:rgba(14,38,34,.08)}
.intro-bar i{display:block;height:100%;background:linear-gradient(90deg,#1e8a4d,#1560c4);transform-origin:right;transform:scaleX(0)}
html.intro-playing .intro-bar i{transform:scaleX(1);transition:transform var(--intro-dur,8s) linear}
.intro-skip{position:absolute;z-index:2;inset-inline-end:clamp(16px,3vw,32px);bottom:clamp(18px,3vw,30px);display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px 9px 12px;border-radius:999px;font:500 .85rem/1 "Readex Pro",system-ui,sans-serif;color:#0e2622;
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 30px -16px rgba(11,60,45,.45);opacity:0;transform:translateY(8px);
  transition:opacity .6s ease .9s,transform .6s ease .9s,background .25s}
html.intro-playing .intro-skip{opacity:1;transform:none}
.intro-skip:hover{background:rgba(255,255,255,.85)}
.intro-skip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.intro-skip:focus-visible{outline:2px solid #1560c4;outline-offset:3px}

/* the exit: video drifts forward and softens while the layer fades */
html.intro-out .intro{opacity:0;visibility:hidden}
html.intro-out .intro-main{transform:scale(1.09);filter:blur(6px)}
html.intro-out .intro-skip,html.intro-out .intro-bar{opacity:0;transition:opacity .4s}

/* the hand-over: everything but the emblem dissolves, then the emblem flies into the header logo (driven by intro.js) */
.intro-emblem{position:absolute;z-index:1;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 18px 30px rgba(11,60,45,.18))}
html.intro-morph .intro{background-color:transparent;cursor:default;pointer-events:none;transition:background-color .8s cubic-bezier(.5,0,.25,1)}
html.intro-morph .intro::after,html.intro-morph .intro-bg,html.intro-morph .intro-main{opacity:0;transition:opacity .7s ease}
html.intro-morph .intro-skip,html.intro-morph .intro-bar{opacity:0;transition:opacity .35s}

/* the page underneath settles into place as the intro leaves (the header doesn't scale, so the logo lands exactly) */
html.intro-on main{opacity:0;transform:scale(.985)}
html.intro-on .site-head{opacity:0}
html.intro-out main,html.intro-out .site-head,html.intro-morph main,html.intro-morph .site-head{opacity:1;transform:none;transition:opacity 1.2s ease .15s,transform 1.4s cubic-bezier(.22,.8,.2,1) .15s}
html.intro-morph main{transition-delay:.35s}

/* keep the custom cursor above the intro */
.cur-dot,.cur-ring{z-index:2100}

@media (prefers-reduced-motion:reduce){.intro{display:none!important}}