/* Kona 2026 : récit au défilement. Portée limitée à .kona-story.
   Sans JS ou en mouvement réduit, chaque scène s'affiche dans son état final.
   --kona-top = bas de l'en-tête fixe (mesuré par js/kona-2026.js) ; les scènes s'épinglent juste dessous. */
.kona-story{--kona-top:64px;--stage-h:calc(100svh - var(--kona-top));--gutter:clamp(18px,4vw,64px);--gold-1:#f6e3b4;--gold-2:#cfa155;--gold-3:#8f6a2c;--engraving:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;overflow-x:clip}
.kona-story :is(h1,h2,h3,p,figure){margin:0}
.kona-story :is(h1,h2,h3){color:var(--ink);font-weight:800;letter-spacing:-.05em;line-height:1.02;text-wrap:balance}
.kona-story img{display:block;max-width:100%;height:auto}
.kona-story .eyebrow{margin-bottom:18px}

/* Scènes : la scène réserve la longueur de défilement, la stage reste épinglée. */
.kona-story .scene{position:relative}
.kona-story .stage{position:relative;height:var(--stage-h);overflow:hidden;background:var(--ground)}
.kona-story .stage::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kona-motion .scene[data-pin]{height:var(--len,300svh)}
.kona-motion .scene[data-pin] .stage{position:sticky;top:var(--kona-top)}
.kona-story .scene--ouverture{--len:300svh}
.kona-story .scene--arrivee{--len:420svh}
.kona-story .scene--duo{--len:300svh}
.kona-story .chapter{--len:320svh}

/* Le cadre garde exactement le ratio des photos : les % du JS sont des coordonnées image. */
.kona-story .frame{--fh:var(--stage-h);--ar:.75;position:absolute;top:calc((var(--stage-h) - var(--fh)) / 2);left:var(--cx,50%);height:var(--fh);width:calc(var(--fh) * var(--ar));margin-left:calc(var(--fh) * var(--ar) / -2);transform-origin:0 0;container-type:inline-size;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 78%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 78%,transparent);mask-composite:intersect}
.kona-story .layer{position:absolute;inset:0;width:100%;height:100%}
.kona-motion :is(.frame,.layer,.side){will-change:transform}
.kona-story .shade{position:absolute;inset:0;background:#000;opacity:.2;pointer-events:none}
.kona-story .veil{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(180deg,transparent,rgba(10,10,10,.92) 70%);pointer-events:none;display:none}

.kona-story .copy{position:absolute;left:var(--gutter);top:50%;translate:0 -50%;width:min(34vw,460px);z-index:2}
.kona-story .copy p{margin-top:22px;font-size:clamp(15px,1.25vw,18px);max-width:40ch}
.kona-story .copy h2{font-size:clamp(34px,4.2vw,62px)}
.kona-story .copy .text-link{margin-top:12px}

/* 1. Ouverture */
.kona-story .scene--ouverture{--cx:62%}
.kona-story .scene--ouverture .copy{width:min(40vw,600px)}
.kona-story .kicker{max-width:none;position:absolute;left:var(--gutter);top:24px;right:var(--gutter);z-index:2;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.kona-story .o-title{font-size:clamp(46px,6vw,96px)}
.kona-story .sheen{position:absolute;left:4%;top:63%;width:62%;height:18%;mix-blend-mode:soft-light;opacity:.9;background:linear-gradient(105deg,transparent 42%,rgba(255,236,196,.95) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:-20% 0;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.kona-story .cue{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);z-index:2}
.kona-story .cue span{width:1px;height:42px;background:linear-gradient(var(--ink),transparent);animation:kona-cue 2.2s ease-in-out infinite}
@keyframes kona-cue{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}}
.kona-story:not(.kona-motion) .cue{display:none}

/* Pont */
.kona-story .bridge{padding:clamp(80px,12vw,160px) var(--gutter);border-block:1px solid var(--line)}
.kona-story .bridge h2{font-size:clamp(34px,5vw,72px)}
.kona-story .signature{display:block;width:100%;height:clamp(48px,6vw,80px);margin-block:clamp(40px,6vw,72px) 28px;overflow:visible}
.kona-story :is(.signature,.rail) path{fill:none;stroke-width:1.7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kona-story .signature .track{stroke:var(--line)}
.kona-story .signature .line{stroke:var(--red-text);stroke-dasharray:1;stroke-dashoffset:0}
.kona-story .legs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.kona-story .legs a{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line);text-decoration:none}
.kona-story .legs .num{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-text)}
.kona-story .legs strong{font-size:clamp(28px,3vw,44px);font-weight:200;letter-spacing:-.04em;color:var(--ink)}
.kona-story .legs a:hover strong{color:var(--red-text)}

/* Chapitres disciplines */
.kona-story .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kona-story .defs{position:absolute}
.kona-story .chapter--natation{--cx:62%}
.kona-story .chapter--natation .frame{--ar:.667;transform-origin:50% 50%}
.kona-motion .chapter--natation .water{filter:url(#kona-water)}
.kona-story .hero{position:absolute;inset:0;overflow:hidden}
.kona-story .hero img{width:100%;height:100%;object-fit:cover}
.kona-story .chapter--velo .hero img{object-position:34% 54%}
.kona-story .chapter--course .hero img{object-position:50% 45%}
.kona-motion .hero img{position:absolute;left:0;top:0;max-width:none;width:max(var(--hw,100vw),calc(var(--stage-h) * 1.5));height:auto;aspect-ratio:1.5;object-fit:fill;transform-origin:0 0;will-change:transform}
.kona-story .chapter--velo{--hw:118vw}
.kona-story .chapter .veil{display:block;inset:0;height:auto;background:linear-gradient(90deg,rgba(10,10,10,.86),rgba(10,10,10,.45) 42%,transparent 68%)}
.kona-story .rail{position:absolute;top:24px;left:var(--gutter);width:calc(100% - var(--gutter) * 2);height:26px;z-index:2;overflow:visible}
.kona-story .rail .track{stroke:rgba(255,255,255,.22)}
.kona-story .rail .seg{stroke:var(--red-text);stroke-dasharray:1;stroke-dashoffset:0}
.kona-story .lead-in h2{font-size:clamp(64px,9vw,148px);font-weight:200;letter-spacing:-.06em;line-height:.9}
.kona-story .lead-in h2 .km{font-variant-numeric:tabular-nums}
.kona-story .register h3{font-size:clamp(30px,3.6vw,54px)}
.kona-story .card{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;width:min(28vw,380px);z-index:2}
.kona-story .chapter--velo .card{width:min(38vw,540px)}
.kona-story .card img{width:100%;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.kona-story .credit{position:absolute;right:var(--gutter);bottom:max(18px,env(safe-area-inset-bottom));z-index:2;font-size:10px;letter-spacing:.06em;color:var(--muted);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.kona-story .card figcaption{font-size:10px;letter-spacing:.06em;color:var(--muted);margin-top:10px}
.kona-motion .chapter :is(.register,.card){opacity:0}
.kona-story:not(.kona-motion) .chapter .stage{height:auto;display:grid;gap:28px;padding:64px var(--gutter)}
.kona-story:not(.kona-motion) .chapter :is(.frame,.hero,.copy,.card,.credit,.rail){position:relative;inset:auto;top:auto;left:auto;right:auto;bottom:auto;margin:0;translate:none;width:auto}
.kona-story:not(.kona-motion) .chapter .frame{height:80svh;width:calc(80svh * .667);max-width:100%;justify-self:center}
.kona-story:not(.kona-motion) .chapter .hero{height:70svh;border-radius:8px}
.kona-story:not(.kona-motion) .chapter .card{max-width:420px}
.kona-story:not(.kona-motion) .chapter :is(.shade,.veil){display:none}

/* 2. Arrivée */
.kona-story .scene--arrivee{--cx:62%}
.kona-story .bigword{position:absolute;left:50%;top:15%;translate:-50% 0;font-size:40cqw;font-weight:800;letter-spacing:-.06em;line-height:.8;color:rgba(255,255,255,.94);white-space:nowrap}
.kona-story .plaque-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.kona-story .plaque-type{position:sticky;top:var(--kona-top);height:var(--stage-h);margin-left:calc(2 * var(--cx) - 100%);display:grid;place-content:center;justify-items:center;text-align:center;padding:var(--gutter)}
.kona-story .plaque-type .eyebrow{color:var(--gold-1);opacity:.8}
.kona-story .engraved{font-family:var(--engraving);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(20px,2.4vw,34px);line-height:1.15;background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.kona-story .engraved.big{font-size:clamp(46px,9vw,132px);letter-spacing:.06em;line-height:1}
.kona-story .engraved.small{font-size:clamp(11px,1vw,14px);letter-spacing:.22em;margin-top:18px;font-family:Inter,Arial,sans-serif;font-weight:600}
.kona-story:not(.kona-motion) .plaque-layer{position:static}
.kona-story:not(.kona-motion) .plaque-type{position:static;height:auto;margin-left:0;padding:48px var(--gutter) 72px}

/* 3. Duo */
.kona-story .scene--duo{--cx:62%}
.kona-story .side{position:absolute;inset:0}
.kona-story .label{position:absolute;bottom:7%;display:flex;flex-direction:column;gap:2px;font-size:clamp(11px,2.6cqw,15px);color:var(--body);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.kona-story .label strong{font-size:1.15em;color:var(--ink)}
.kona-story .left .label{left:16%}
.kona-story .right .label{left:56%}

/* Fin */
.kona-story .kona-end{padding:clamp(90px,12vw,160px) var(--gutter) clamp(60px,8vw,100px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px}
.kona-story .kona-end h2{font-size:clamp(32px,4.4vw,64px);max-width:20ch}
.kona-story .kona-end .actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* Mobile et écrans en portrait : texte en bas, sur un voile. */
@media (max-width:899px),(orientation:portrait){
  .kona-story .scene--ouverture,.kona-story .scene--duo{--cx:50%}
  .kona-story .scene--arrivee{--cx:53%}
  .kona-story .veil{display:block}
  .kona-story .copy,.kona-story .scene--ouverture .copy{top:auto;bottom:max(32px,calc(env(safe-area-inset-bottom) + 16px));right:var(--gutter);translate:none;width:auto}
  .kona-story .copy p{margin-top:14px}
  .kona-story .o-title{font-size:clamp(40px,11vw,64px)}
  .kona-story .cue{display:none}
  .kona-story .scene--duo .frame{--fh:min(var(--stage-h),138vw);top:max(16px,calc((var(--stage-h) - var(--fh)) / 2 - 60px))}
  .kona-story .scene--duo .veil{height:48%}
  .kona-story .scene--duo .label{bottom:19%}
  .kona-story .d-copy .eyebrow{display:none}
  .kona-story .d-copy h2{font-size:clamp(30px,8.5vw,44px)}
  .kona-story .legs{grid-template-columns:1fr}
  .kona-story .chapter--natation{--cx:50%}
  .kona-story .chapter .veil{inset:auto 0 0;height:55%;background:linear-gradient(180deg,transparent,rgba(10,10,10,.92) 70%)}
  .kona-story .lead-in h2{font-size:clamp(64px,22vw,110px)}
  .kona-story .card,.kona-story .chapter--velo .card{top:72px;left:var(--gutter);right:auto;translate:none;width:min(58vw,280px)}
  .kona-story .chapter--velo .card{width:min(82vw,420px)}
  .kona-motion .chapter--velo .hero img{width:max(100vw,calc(var(--stage-h) * .9));-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent)}
  .kona-story .credit{bottom:auto;top:54px}
}
@media (prefers-reduced-motion:reduce){.kona-story .cue span{animation:none}}