/* ============================================================
   Tribal Kite School — home page (hero) styles
   Only loaded by index.php. Shared chrome lives in site.css.
   ============================================================ */


.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#0E2A34;perspective:1200px}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.grade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,28,36,0) 0%,rgba(6,28,36,0) 30%,rgba(6,28,36,0) 58%),
    linear-gradient(180deg,rgba(8,36,46,0) 0%,rgba(8,36,46,0) 30%,rgba(8,36,46,0) 58%,rgba(6,30,38,.08) 100%)}
/* Both shades lightened on 2026-09-10: the lower left read as black once
   the photograph behind it was cleaned up. The cards carry their own
   dark glass, so the bottom no longer needs to be pulled to near-black. */
.vig{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(125% 92% at 50% 44%,transparent 66%,rgba(4,20,26,.02) 100%)}
.sunglow{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:1;
  background:
    radial-gradient(36vmax 36vmax at 86% -8%, rgba(255,244,214,.98), rgba(255,236,190,.55) 35%, transparent 65%),
    radial-gradient(14vmax 14vmax at 70% 12%, rgba(255,255,255,.42), transparent 65%),
    radial-gradient(20vmax 20vmax at 60% 45%, rgba(255,255,255,.15), transparent 80%)}
html,body{overflow-x:hidden}
@media(max-width:860px){.sunglow{opacity:.9}}

/* ---------- the long wave that hits the screen ---------- */
.wave{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;display:none}
.wave.go{display:block}
.wave i{position:absolute;left:-12%;right:-12%;height:150%;top:100%;display:block}
.wave .w1{background:linear-gradient(180deg,
  rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 6%, rgba(226,246,250,.72) 14%,
  rgba(150,214,226,.85) 38%, rgba(74,166,186,.94) 72%, rgba(40,124,144,.96) 100%)}
.wave .w2{height:40%;filter:blur(3px);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,250,252,.55) 40%, rgba(236,250,252,0))}
.wave .flash{height:120%;background:#fff;opacity:0}
.wave.go .w1{animation:waveUp 1.0s cubic-bezier(.20,.72,.24,1) forwards}
.wave.go .w2{animation:waveUp 1.0s cubic-bezier(.20,.72,.24,1) .04s forwards}
.wave.go .flash{animation:waveFlash .62s ease .26s forwards}
@keyframes waveUp{to{transform:translateY(-260%)}}
@keyframes waveFlash{0%{opacity:0}30%{opacity:.78}100%{opacity:0}}

/* ---------- water on the lens ---------- */
.lens{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
/* The droplets that used to land on the lens with the splash were
   asked off (2026-09-09): they rose behind the headline just as it
   revealed and read as bubbles over the text. lensSplash() no longer
   makes them; the .drop rules below stay for the day they return. */
.wash{position:absolute;inset:-6%;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(220,244,248,0) 0%,rgba(226,248,252,.45) 42%,rgba(255,255,255,.78) 100%)}
.wash.go{animation:washUp .55s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes washUp{
  0%{opacity:0;transform:translateY(58%) scaleY(1.25)}
  16%{opacity:.92}
  100%{opacity:0;transform:translateY(-72%) scaleY(1)}
}
.drop{position:absolute;pointer-events:none;opacity:0;transform:scale(.2)}
.drop__b{position:absolute;inset:0;border-radius:inherit;
  animation:wob var(--wobT,1.4s) ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 33% 26%, rgba(255,255,255,.98) 0 6%, rgba(255,255,255,0) 19%),
    radial-gradient(circle at 52% 80%, rgba(255,255,255,.50) 0 10%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 52%, rgba(214,238,242,.06) 26%, rgba(150,200,212,.24) 58%, rgba(70,124,140,.46) 100%);
  border:1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 -4px 7px rgba(255,255,255,.55),
              inset 0 4px 7px rgba(14,52,66,.42),
              0 2px 3px rgba(8,36,46,.22);
  backdrop-filter: blur(var(--blur,2.5px)) saturate(1.3) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--blur,2.5px)) saturate(1.3) brightness(1.08);
}
.drop.nofx .drop__b{backdrop-filter:none;-webkit-backdrop-filter:none}
@keyframes wob{from{transform:translateX(calc(var(--wx,1.5px) * -1))}to{transform:translateX(var(--wx,1.5px))}}
.drop.slide::before{content:"";position:absolute;left:30%;right:30%;bottom:62%;height:0;border-radius:40%;
  background:linear-gradient(180deg,rgba(214,240,244,0),rgba(204,236,242,.32));
  animation:trailGrow var(--slideT,1.4s) linear var(--slideW,.4s) forwards}
@keyframes trailGrow{to{height:var(--trail,90px)}}
@keyframes dropIn{to{opacity:1;transform:scale(1)}}
@keyframes dropFade{to{opacity:0}}
@keyframes dropSlide{
  from{transform:scale(1) translateY(0)}
  to{transform:scale(1) translateY(var(--dy))}
}
.drop.in{animation:dropIn .08s ease-out forwards,
                   dropFade var(--fadeT) ease-in var(--fadeW) forwards}
.drop.slide{animation:dropIn .08s ease-out forwards,
                      dropSlide var(--slideT) cubic-bezier(.55,.06,.9,.55) var(--slideW) forwards,
                      dropFade var(--fadeT) ease-in var(--fadeW) forwards}

.ui{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.ui > *{pointer-events:auto}
.wrap{width:min(1240px,100% - var(--gut)*2);margin-inline:auto}

.nav{padding:20px 0}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo img{height:54px;width:auto;filter:brightness(0) invert(1)}
.nav__links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav__links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;position:relative;padding-bottom:4px}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--kite);
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;width:44px}
.burger span{display:block;height:2px;background:#fff;margin:5px 0}

.mid{padding-bottom:8px;will-change:transform}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--sun);display:flex;align-items:center;gap:14px;margin:0 0 22px}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--sun)}
/* Title case in DM Serif Display, larger than before, the last word in
   italic gold. Chosen from a sheet of eight faces on 2026-09-10 for the
   most presence over the photograph; Cormorant Garamond and Playfair
   Display were tried first and looked thin at this size. */
.hero h1{font-family:var(--hero-display);font-weight:400;font-size:clamp(48px,10.6vw,156px);line-height:.96;letter-spacing:-.01em;text-transform:none;margin:0;text-shadow:0 3px 40px rgba(4,20,26,.55)}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal}
.hero h1 em{font-style:italic;font-weight:400;color:var(--sun)}
.tag{font-size:clamp(15px,1.6vw,19px);font-weight:400;letter-spacing:.06em;max-width:40ch;margin:26px 0 34px;color:rgba(255,255,255,.88);line-height:1.6}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:32px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:15px 28px;border-radius:999px;border:1px solid transparent;transition:transform .25s,background .25s,color .25s,border-color .25s}
.btn svg{width:13px;height:13px;transition:transform .25s}
.btn:hover svg{transform:translateX(6px)}
.btn--solid{color:var(--ink);font-weight:700;box-shadow:0 14px 40px rgba(255,201,60,.22);
  background-image:linear-gradient(to top,#fff 50%,var(--sun) 50%);
  background-size:100% 200%;background-position:0 0;
  transition:background-position .35s cubic-bezier(.2,.7,.3,1),color .3s,transform .25s}
.btn--solid:hover{background-position:0 100%;color:var(--ink);transform:translateY(-2px)}
/* A crossfade, not a slide: the white fill used to slide back out on
   mouse-off, and through the blur it left a smear that looked cheap
   (review, 2026-09-10). */
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background-color:rgba(255,255,255,.08);backdrop-filter:blur(6px);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .25s}
.btn--ghost:hover{background-color:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}

.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:clamp(26px,4vw,46px)}
.act{position:relative;display:block;padding:29px 26px 31px;border-radius:8px;overflow:hidden;
  background:rgba(6,30,37,.36);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .35s,border-color .35s}
.act:hover{background:rgba(6,30,37,.52);border-color:var(--sun)}
.act__k{font-family:var(--mono);font-size:11.8px;letter-spacing:.2em;text-transform:uppercase;color:var(--sun);display:block;margin-bottom:14px}
.act__t{font-family:var(--display);font-size:26.5px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;display:block}
.act__d{font-size:16.5px;color:rgba(255,255,255,.78);margin:10px 0 0;line-height:1.45}
.act__ar{position:absolute;top:22px;right:22px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.32);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s}
.act__ar svg{width:12px;height:12px;transition:transform .3s}
.act:hover .act__ar{background:var(--sun);border-color:var(--sun);color:#0B2530}
.act:hover .act__ar svg{transform:translateX(3px)}

.cue{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;opacity:0;transition:opacity 1s ease}
.cue.in{opacity:1}
/* On a short screen the cards reach the bottom edge and the cue would
   sit on top of them, so it goes. */
@media(max-height:800px){.cue{display:none}}
.cue::after{content:"";width:1px;height:22px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);animation:cueRun 2.2s ease-in-out infinite}
@keyframes cueRun{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.skip{position:absolute;right:var(--gut);bottom:24px;z-index:9;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);background:none;border:1px solid rgba(255,255,255,.3);padding:9px 16px;border-radius:999px;cursor:pointer;transition:opacity .5s,background .3s,color .3s}
.skip:hover{background:#fff;color:var(--ink)}
.skip.gone{opacity:0;pointer-events:none}

.boot{position:absolute;inset:0;z-index:20;background:none;display:grid;place-items:center;transition:opacity .7s ease;pointer-events:none}
.boot::before{content:"";position:absolute;inset:0;
  background:radial-gradient(46vmax 34vmax at 50% 52%, rgba(6,30,38,.42), rgba(6,30,38,.10) 55%, transparent 75%)}
.boot.gone{opacity:0}
.boot__m{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 2px 18px rgba(4,20,26,.75)}
.boot__bar{position:relative;width:170px;height:1px;background:rgba(255,255,255,.22);margin-top:16px;overflow:hidden}
.boot__bar i{display:block;height:100%;width:40%;background:var(--sun);animation:bootRun 1.1s ease-in-out infinite}
@keyframes bootRun{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

/* Hidden only when there is a script to reveal it (html.js is set by
   header.php). Without one — a crawler's first pass, a reader with
   script off — the headline and the buttons are simply there. */
.js .rz{opacity:0;transform:translate3d(0,24px,0);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.rz.in{opacity:1;transform:none}
.js .hero h1 .ln i{opacity:0;transform:translate3d(0,105%,0) rotate(2.5deg);transition:opacity .85s cubic-bezier(.16,.9,.28,1),transform 1s cubic-bezier(.16,.9,.28,1)}
.hero h1 .ln i.in{opacity:1;transform:none}

@media(max-width:1080px){ .acts{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){
  .nav__links{display:none}
  .nav__links.open{display:flex;position:absolute;top:88px;left:var(--gut);right:var(--gut);flex-direction:column;align-items:flex-start;gap:0;background:rgba(8,36,46,.96);backdrop-filter:blur(16px);border-radius:6px;padding:6px 22px 16px;z-index:12}
  .nav__links.open a{padding:15px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
  .burger{display:block}
  .nav__in .btn{display:none}
  .acts{grid-template-columns:1fr 1fr;gap:10px}
  .act__d{display:none}
  .cue{display:none}
}
@media(max-width:560px){ .act{padding:16px 16px 17px} .act__t{font-size:16px} .act__ar{display:none} }
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important}
  .rz,.hero h1 .ln i{opacity:1!important;transform:none!important}
  .cue{opacity:1}
  .lens{display:none}
}

/* signature display tuning */
/* A step smaller than the first cut (12vw / 176px), asked for on
   2026-09-10 once the whole page was seen together. */
.hero h1{font-weight:400;letter-spacing:-.01em;font-size:clamp(48px,10.6vw,156px);line-height:.96}
.act__t{font-weight:600;letter-spacing:0;text-transform:none}

/* ============================================================
   Phone hero
   ------------------------------------------------------------
   A 1.78:1 photograph behind a 0.46 screen means the headline has
   to sit on top of the art rather than beside it - there is no
   column to put it in. coverAnchor() in index.php slides the frame
   onto the kite-and-rider diagonal so the shot reads as composed
   rather than cropped at random; the rules below do the other half.

   The phone hero is not the desktop hero at smaller type. It is
   built as its own composition: a full screen of photograph, the
   title broken to three lines so it can be twice the size it was,
   full-width buttons, and the four cards carrying their captions
   again in a 2x2 block along the bottom.
   ============================================================ */
@media(max-width:760px){

  /* .ui is absolute on desktop, which means the hero cannot grow and
     content simply gets cut off by overflow:hidden. On a phone the
     copy is much taller relative to the screen, so .ui goes back in
     flow and the hero takes its height from it - min-height keeps the
     full screen when there is room, and nothing ever clips when there
     is not (320x568 is the case that used to lose a row of cards). */
  .hero{height:auto;min-height:100svh}
  .ui{position:relative;inset:auto;width:100%;min-height:100svh;box-sizing:border-box}

  /* Cinematic wash: down from the top and in from the left, so the
     type has ground to sit on while the water on the right stays the
     colour it was photographed. Lighter at the top than it used to be
     - the old .72 was flattening the sky. */
  .grade{background:
    linear-gradient(180deg,rgba(6,28,36,.62) 0%,rgba(6,28,36,.34) 22%,
                            rgba(8,36,46,.06) 46%,rgba(6,30,38,.55) 74%,
                            rgba(5,26,34,.93) 100%),
    linear-gradient(100deg,rgba(6,28,36,.60) 0%,rgba(6,28,36,.24) 46%,
                            rgba(6,28,36,0) 80%)}

  /* location line */
  .eyebrow{font-size:10.5px;letter-spacing:.22em;margin:0 0 16px}
  .eyebrow::before{width:26px}

  /* Three lines, on purpose. "Kite School" on one line caps the type at
     about 40px on a 390 screen; letting SCHOOL take its own line buys
     back 13px of size and gives the block the mass a hero needs. */
  .hero h1{font-size:clamp(46px,14vw,72px);line-height:.96;letter-spacing:-.01em}
  .hero h1 em{display:block}

  .tag{font-size:17px;line-height:1.5;max-width:340px;margin:18px 0 24px}

  /* Left-aligned and only as wide as their labels, which is what keeps
     the right-hand third of the frame clear - full-width pills laid a
     bar straight across the rider. They wrap to two rows when the two
     labels no longer fit the column (368px needed, 350px at 390) and
     sit side by side when they do (390px at 430). 46px tall either
     way, which is a comfortable target. */
  .cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:28px}
  .btn{padding:16px 24px;font-size:11.5px;letter-spacing:.1em}

  /* cards: captions come back, and the corners soften to match */
  .acts{gap:10px;padding-bottom:clamp(20px,5vw,30px)}
  .act{padding:18px 17px 20px;border-radius:10px}
  .act__k{font-size:10.3px;letter-spacing:.16em;margin-bottom:9px}
  .act__t{font-size:20px}
  .act__d{display:block;font-size:14px;line-height:1.38;margin:7px 0 0}
}

/* 375 is five pixels short of holding both labels on one row at the
   padding above, so the pair breaks for the sake of five pixels.
   Trimmed just enough to keep them side by side from 361px up. */
@media(min-width:361px) and (max-width:400px){
  .btn{padding:16px 19px;letter-spacing:.07em}
}

@media(max-width:360px){
  .hero h1{font-size:clamp(42px,13.4vw,46px)}
  .tag{font-size:15.5px;max-width:none;margin:16px 0 20px}
  .eyebrow{font-size:10px;letter-spacing:.18em;margin-bottom:14px}
  .btn{padding:15px 16px;font-size:11px;letter-spacing:.08em}
}

/* The four cards sat on auto rows, so the row holding "Floating
   Experience" - the only two-line title - ran 16px taller than the one
   above it and the grid looked ragged. Equal rows, and the index labels
   stay on one line. */
@media(max-width:860px){
  .acts{grid-auto-rows:1fr}
  .act{display:flex;flex-direction:column;justify-content:flex-start}
  .act__k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:360px){
  .acts{gap:8px}
  .act{padding:13px 12px 14px}
  .act__k{font-size:9.3px;letter-spacing:.13em;margin-bottom:7px}
  .act__t{font-size:14.8px}
  .act__d{font-size:11.5px;margin-top:5px}
}
/* At 320 the captions are the last 60px that will not fit: with them the
   hero runs 619px against a 568px screen and the bottom row of cards is
   cut in half. Without them everything lands inside one screen at 549px.
   The card titles still say what each one is. */
@media(max-width:340px){
  .act__d{display:none}
  /* and the last 36px come off the copy so the second row of cards
     finishes above the fold on a 568px screen rather than 37px below it */
  .hero h1{font-size:40px}
  .eyebrow{margin-bottom:12px}
  .tag{font-size:15px;line-height:1.45;margin:14px 0 16px}
  .mid{padding-bottom:0}
  .btn{padding:15px 12px;letter-spacing:.06em}
  .acts{gap:6px;padding-bottom:8px}
  .act{padding:11px 10px 12px}
}

/* Touch feedback, since none of the :hover states ever fire on a phone. */
@media(hover:none){
  .btn:active{transform:scale(.975)}
  .act:active{transform:scale(.985);background:rgba(6,30,37,.52)}
}

/* "Skip intro" sits bottom-right, which on a phone puts it on top of
   the fourth activity card. Beside the eyebrow is no good either — at
   320px that line already runs to within 60px of the edge and the button
   needs 86px. What is free is the open water between the buttons and the
   cards, so it goes there: far enough off the bottom to clear two rows of
   cards plus their padding at every phone height. It is only on screen
   for the length of the intro. */
@media(max-width:860px){
  .skip{bottom:clamp(240px,32vh,300px);right:var(--gut);
    font-size:9px;letter-spacing:.16em;padding:7px 12px}
}

/* ---------- short windows ----------
   A laptop at 1366×680, or any browser with a bookmarks bar and the
   developer tools open: the hero is the height of the window, and the
   heading was sized by the window's width alone, so the four cards
   were the first thing pushed off the bottom (reported 2026-09-10).
   Below these heights the heading also bows to the window's height
   and the space above the cards tightens. Width-gated so the phone
   rules above keep their own sizes. */
@media(min-width:861px) and (max-height:820px){
  .hero h1{font-size:clamp(46px,min(10.6vw,18.5vh),156px)}
  .tag{margin:16px 0 22px}
  .acts{padding-bottom:22px}
  .act{padding:21px 21px 23px}
}
@media(min-width:861px) and (max-height:700px){
  .hero h1{font-size:clamp(42px,min(10.6vw,16.5vh),140px)}
  .eyebrow{margin-bottom:12px}
  .tag{margin:12px 0 18px;font-size:15px}
  .act{padding:17px 19px 19px}
  .act__d{display:none}
}