/*
  HORIZONTAL WHALE SEQUENCE — WORKING ORCHESTRATION · 2026-08-13
  Full-bleed Views 02 and 03 only. The approved locked typography and Horse
  compositions remain untouched while these frames are art-directed.
*/

@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/CormorantGaramond-Light.woff2') format('woff2'),
      url('fonts/CormorantGaramond-Light.ttf') format('truetype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

#p2 .vision-whale-slide[data-panel-id="vision-water-origin"] .vision-whale-title{
  display:none;
}

#p2 .vision-whale-slide[data-panel-id="vision-water-origin"]::before{
  content:"";
  position:absolute;
  inset:-4%;
  z-index:0;
  display:none;
  /* The square ocean study becomes the side field; the whale remains undistorted in front. */
  background:url("banatti-whale-background-00-photoshop-source.webp") center / 100% 100% no-repeat;
  filter:blur(12px) saturate(.86) brightness(.78);
  opacity:.92;
  transform:scale(1.05);
  pointer-events:none;
}

#p2 .vision-whale-slide[data-panel-id="vision-water-origin"] .vision-whale-camera{
  background:url("banatti-whale-submersible-background-wide-00.jpg") center / cover no-repeat;
  z-index:1;
  -webkit-mask-image:none;
  mask-image:none;
  animation:whaleCameraPullback 15.8s cubic-bezier(.2,.72,.2,1) both;
}

#p2 .vision-whale-slide[data-panel-id="vision-whale"] .vision-whale-camera{
  animation:whaleCameraContinuityHold 15.8s linear both;
}

/* VIEW 01 — drifting depth veils soften the photographic-to-living flipper handoff. */
#p2 .vision-whale-slide[data-panel-id="vision-whale"]::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:6;
  display:block;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:soft-light;
  background:#031a35 url("vision-sea-origin.jpg") 50% 72% / 118% 118% no-repeat;
  filter:saturate(.82) brightness(.88) blur(.5px);
  transform:scale(1.04);
  will-change:opacity,transform;
}

#p2 .vision-whale-slide[data-panel-id="vision-whale"]:not(.is-hidden)::before{
  animation:whaleLivingWaterVeils 8.8s ease-in-out both;
}

@keyframes whaleLivingWaterVeils{
  0%{opacity:.58;transform:translate3d(3.8%,0,0) scale(1.04);}
  10%{opacity:.32;transform:translate3d(3%,0,0) scale(1.035);}
  19%{opacity:.03;transform:translate3d(2.2%,0,0) scale(1.03);}
  36%{opacity:.04;transform:translate3d(.8%,0,0) scale(1.025);}
  45%{opacity:.26;transform:translate3d(0,0,0) scale(1.02);}
  56%{opacity:.03;transform:translate3d(-1%,0,0) scale(1.016);}
  73%{opacity:.02;transform:translate3d(-2.3%,0,0) scale(1.012);}
  82%{opacity:.17;transform:translate3d(-3%,0,0) scale(1.008);}
  92%,100%{opacity:0;transform:translate3d(-3.8%,0,0) scale(1.004);}
}

/* VIEW 01 — the ocean discovers Whaley. A broad upper-water blessing gathers
   over the whale, then resolves into smaller moving caustics across its back. */
#p2 .vision-whale-light-revelation{
  position:absolute;
  inset:-4%;
  z-index:9;
  display:block;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 38% 58% at 55% -7%,rgba(239,255,255,.54) 0,rgba(149,226,255,.22) 42%,transparent 74%),
    linear-gradient(113deg,transparent 27%,rgba(185,239,255,.08) 38%,rgba(243,255,251,.34) 51%,rgba(141,219,255,.12) 61%,transparent 72%),
    radial-gradient(ellipse 57% 23% at 53% 49%,rgba(248,255,247,.38) 0,rgba(134,224,255,.18) 48%,transparent 78%);
  -webkit-mask-image:
    radial-gradient(ellipse 58% 25% at 52% 49%,#000 0 55%,rgba(0,0,0,.74) 69%,transparent 88%),
    linear-gradient(113deg,transparent 24%,#000 42% 59%,transparent 76%);
  mask-image:
    radial-gradient(ellipse 58% 25% at 52% 49%,#000 0 55%,rgba(0,0,0,.74) 69%,transparent 88%),
    linear-gradient(113deg,transparent 24%,#000 42% 59%,transparent 76%);
  filter:blur(.65px) saturate(1.05);
  transform:translate3d(-1.4%,-110px,0) scale(1.01);
  will-change:opacity,transform;
}

#p2 .vision-whale-light-revelation::after{
  content:"";
  position:absolute;
  inset:18% 6% 21%;
  opacity:0;
  background:
    radial-gradient(ellipse 18% 4% at 17% 43%,rgba(235,255,253,.3),transparent 72%),
    radial-gradient(ellipse 24% 5% at 39% 49%,rgba(221,250,255,.24),transparent 74%),
    radial-gradient(ellipse 20% 4.5% at 63% 46%,rgba(239,255,250,.28),transparent 72%),
    radial-gradient(ellipse 14% 3.8% at 81% 51%,rgba(215,248,255,.2),transparent 72%),
    linear-gradient(103deg,transparent 28%,rgba(236,255,252,.16) 46%,transparent 61%);
  -webkit-mask-image:radial-gradient(ellipse 58% 27% at 52% 50%,#000 0 53%,transparent 88%);
  mask-image:radial-gradient(ellipse 58% 27% at 52% 50%,#000 0 53%,transparent 88%);
  filter:blur(.8px);
  transform:translate3d(-2.5%,-110px,0) scale(1.02);
}

#p2 .vision-whale-slide[data-panel-id="vision-whale"]:not(.is-hidden) .vision-whale-light-revelation{
  animation:whaleLivingLightRevelation 9.2s cubic-bezier(.2,.72,.2,1) .02s both;
}

#p2 .vision-whale-slide[data-panel-id="vision-whale"]:not(.is-hidden) .vision-whale-light-revelation::after{
  animation:whaleLivingCausticCrown 9.2s ease-in-out .02s both;
}

@keyframes whaleLivingLightRevelation{
  0%,2%{opacity:0;transform:translate3d(-1.4%,-110px,0) scale(1.01);}
  12%{opacity:.12;transform:translate3d(-.9%,-111px,0) scale(1.012);}
  28%{opacity:.3;transform:translate3d(-.3%,-110px,0) scale(1.016);}
  45%{opacity:.45;transform:translate3d(.35%,-109px,0) scale(1.02);}
  70%{opacity:.31;transform:translate3d(.8%,-110px,0) scale(1.018);}
  100%{opacity:.21;transform:translate3d(1.15%,-111px,0) scale(1.016);}
}

@keyframes whaleLivingCausticCrown{
  0%,6%{opacity:0;transform:translate3d(-2.5%,-110px,0) scale(1.02);}
  20%{opacity:.14;transform:translate3d(-1.2%,-111px,0) scale(1.026);}
  38%{opacity:.36;transform:translate3d(.2%,-112px,0) scale(1.032);}
  68%{opacity:.19;transform:translate3d(1.3%,-111px,0) scale(1.028);}
  100%{opacity:.11;transform:translate3d(2.1%,-110px,0) scale(1.025);}
}

/* VIEW 01 — begin Whaley's unmistakable living beat immediately on entry.
   The hidden state stops the flipper clock; the visible state restarts it just
   inside the rise, so a quick viewer sees life before reaching Next. */
#p2 .vision-whale-slide[data-panel-id="vision-whale"].is-hidden .vision-whale-pose-b{
  animation:none;
  opacity:0;
}

#p2 .vision-whale-slide[data-panel-id="vision-whale"]:not(.is-hidden) .vision-whale-pose-b{
  animation:
    whaleLivingBalance 15.8s ease-in-out infinite,
    whaleAppendageBalance 8.4s ease-in-out -1.05s infinite;
}

/* VIEW 01 ↔ 02 continuity: keep the living flipper animation, while the two
   whale worlds overlap briefly at the click so no animated pose hard-resets. */
#p2 .section-screen-slide.whale-handoff-in{
  z-index:20;
  animation:whaleHandoffIn .58s cubic-bezier(.22,.61,.36,1) both;
}

#p2 .section-screen-slide.whale-handoff-out{
  z-index:21;
  animation:whaleHandoffOut .58s cubic-bezier(.22,.61,.36,1) both;
  pointer-events:none;
}

@keyframes whaleHandoffIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes whaleHandoffOut{
  from{opacity:1;}
  to{opacity:0;}
}

#p2 .vision-whale-slide[data-panel-id="vision-water-origin"] .vision-whale-image,
#p2 .vision-whale-slide[data-panel-id="vision-water-origin"] .vision-whale-pose,
#p2 .vision-whale-slide[data-panel-id="vision-water-origin"] :is(.vision-whale-diver-echo,.vision-whale-pod-life,.vision-whale-crew){
  display:none;
}

#p2 .vision-water-origin-scene{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  overflow:hidden;
  opacity:0;
  transform:scale(1.025);
  transform-origin:50% 50%;
  will-change:opacity,transform;
}

#p2 .vision-sea-origin-scene{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  overflow:hidden;
  opacity:1;
  background:#031a35;
  will-change:opacity,transform;
}

#p2 .vision-sea-origin-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 44%;
  transform:translate3d(0,-32%,0) scale(1.51);
  transform-origin:50% 0;
}

#p2 .vision-sea-origin-image-primary{
  opacity:.86;
}

#p2 .vision-sea-origin-image-secondary{
  opacity:.08;
  mix-blend-mode:soft-light;
  filter:saturate(.9) brightness(1.06);
  transform:translate3d(0,-35%,0) scale(1.62);
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-sea-origin-scene{
  animation:seaOriginDepart 14.4s ease-in-out both;
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-sea-origin-image-primary{
  animation:
    seaOriginBreathe 14.4s cubic-bezier(.2,.72,.2,1) both,
    seaOriginPrimaryExposure 5.8s ease-in-out infinite;
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-sea-origin-image-secondary{
  animation:
    seaOriginSecondaryDepth 14.4s cubic-bezier(.2,.72,.2,1) both,
    seaOriginSecondaryExposure 5.8s ease-in-out -.7s infinite;
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-water-origin-scene{
  animation:whaleOriginArrive 6.2s cubic-bezier(.24,.7,.2,1) both;
}

#p2 .vision-water-origin-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

#p2 .vision-water-origin-dark{opacity:1;}
#p2 .vision-water-origin-lit{opacity:0;}

#p2 .vision-water-origin-slide.is-sequencing .vision-water-origin-lit{
  animation:whaleOriginBreathingShimmer 5.8s ease-in-out 1s infinite;
}

#p2 .vision-sea-origin-title{
  position:absolute;
  z-index:10;
  left:32px;
  right:32px;
  bottom:79px;
  height:48px;
  color:#fff;
  font-family:'Archivo Black',sans-serif;
  font-size:42px;
  font-weight:400;
  line-height:1;
  letter-spacing:.03em;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 20px rgba(0,18,38,.32);
  opacity:1;
  pointer-events:none;
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-sea-origin-title{
  animation:none;
}

#p2 .vision-sea-origin-word{
  position:absolute;
  inset:auto 0 0;
  display:block;
  opacity:0;
  white-space:nowrap;
  transform:translate3d(0,7px,0);
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-sea-origin-word-ocean{
  animation:seaOriginWordReveal 1.9s cubic-bezier(.2,.72,.2,1) .35s both;
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-sea-origin-word-depths{
  animation:seaOriginWordReveal 2.2s cubic-bezier(.2,.72,.2,1) 1.75s both;
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-sea-origin-word-water{
  animation:seaOriginWordReveal 2.6s cubic-bezier(.2,.72,.2,1) 3.2s both;
}

#p2 .vision-whale-story-title{
  position:absolute;
  z-index:9;
  top:auto;
  left:32px;
  right:32px;
  bottom:79px;
  display:block;
  width:auto;
  color:#fff;
  font-family:'Archivo Black',sans-serif;
  font-size:34.2px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  text-align:left;
  text-align-last:left;
  white-space:nowrap;
  text-shadow:
    0 1px 2px rgba(0,0,0,.72),
    0 0 18px rgba(0,0,0,.24);
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,7px,0);
}

#p2 .vision-sea-origin-slide.is-sequencing .vision-whale-story-title{
  animation:whaleStoryTitleReveal 2.8s cubic-bezier(.2,.72,.2,1) 5.45s both;
}

@keyframes whaleStoryTitleReveal{
  from{opacity:0;filter:blur(2px);transform:translate3d(0,7px,0);}
  to{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
}

@keyframes seaOriginDepart{
  0%,7.5%{opacity:1;transform:scale(1);}
  15%{opacity:.92;transform:scale(1.002);}
  25.8%{opacity:.58;transform:scale(1.004);}
  35.8%{opacity:.1;transform:scale(1.006);}
  43.3%{opacity:.03;transform:scale(1.007);}
  50.8%{opacity:.3;transform:scale(1.008);}
  58.3%{opacity:.04;transform:scale(1.009);}
  67.5%{opacity:.18;transform:scale(1.01);}
  75%{opacity:.03;transform:scale(1.011);}
  84%{opacity:.11;transform:scale(1.012);}
  92%{opacity:.02;transform:scale(1.013);}
  100%{opacity:0;transform:scale(1.014);}
}

@keyframes seaOriginBreathe{
  0%{transform:translate3d(0,-32%,0) scale(1.51);}
  100%{transform:translate3d(0,-32%,0) scale(1.37);}
}

@keyframes seaOriginSecondaryDepth{
  0%{transform:translate3d(0,-35%,0) scale(1.62);}
  100%{transform:translate3d(0,-35%,0) scale(1.4);}
}

@keyframes seaOriginPrimaryExposure{
  0%,100%{opacity:.86;}
  18%{opacity:.58;}
  40%{opacity:.92;}
  62%{opacity:.52;}
  82%{opacity:.8;}
}

@keyframes seaOriginSecondaryExposure{
  0%,100%{opacity:.08;}
  18%{opacity:.4;}
  40%{opacity:.12;}
  62%{opacity:.44;}
  82%{opacity:.15;}
}

@keyframes whaleOriginArrive{
  0%,16%{opacity:0;transform:scale(1.055);}
  34%{opacity:.16;transform:scale(1.049);}
  56%{opacity:.46;transform:scale(1.04);}
  78%{opacity:.78;transform:scale(1.03);}
  100%{opacity:1;transform:scale(1.025);}
}

@keyframes whaleOriginBreathingShimmer{
  0%,100%{opacity:.025;}
  16%{opacity:.1;}
  38%{opacity:.32;}
  58%{opacity:.12;}
  78%{opacity:.35;}
  92%{opacity:.09;}
}

@keyframes seaOriginWordReveal{
  0%{opacity:0;filter:blur(2px);transform:translate3d(0,7px,0);}
  18%,70%{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
  100%{opacity:0;filter:blur(1px);transform:translate3d(0,-3px,0);}
}

@keyframes whaleCameraPullback{
  0%{transform:scale(.94);}
  100%{transform:scale(1);
  }
}

@keyframes whaleCameraContinuityHold{
  from,to{transform:scale(1);}
}

#p2 .vision-whale-photo-slide{
  padding:0;
  background:#063b61;
}

#p2 .vision-bonneville-wide-slide{
  padding:0;
  overflow:hidden;
  background:#c9b2ab;
}

#p2 .vision-bonneville-wide-image{
  position:absolute;
  z-index:1;
  inset:0 auto 0 0;
  display:block;
  width:145%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 50%;
  transform:translate3d(0,0,0) scale(1.015);
  transform-origin:50% 50%;
  will-change:transform;
}

#p2 .vision-bonneville-wide-slide.is-sequencing .vision-bonneville-wide-image{
  animation:bonnevilleGateReveal 12.8s cubic-bezier(.22,.72,.18,1) 2.85s both;
}

/* ELEMENT ORIGIN GRAMMAR — LAND
   Water opens as an iris. Land awakens as two human lids: the upper lid sits
   over the lower, their arcs lengthen as one continuous opening, and only then
   does the whole dark animal move toward the viewer. */

#p2 .vision-bonneville-wide-slide[data-element-origin="land"]{
  isolation:isolate;
  background:#000;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-land-origin-sheet{
  position:absolute;
  inset:0;
  z-index:10;
  display:block;
  background:transparent;
  transform:translate3d(0,0,0) scale(.985);
  transform-origin:50% 58%;
  filter:blur(0);
  pointer-events:none;
  will-change:opacity,transform,filter;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-land-lids{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  transform:scaleX(1.08);
  transform-origin:50% 50%;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-land-lid{
  fill:#000;
  stroke:#000;
  stroke-width:3;
  vector-effect:non-scaling-stroke;
  will-change:d;
}

/* The lower lid is painted first; the upper lid crosses over it at the slit. */
#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-land-lid-upper{
  position:relative;
  z-index:2;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-land-origin-curtain{
  position:absolute;
  inset:0;
  z-index:11;
  display:block;
  background:#000;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-land-origin-prologue{
  position:absolute;
  z-index:13;
  left:32px;
  right:32px;
  bottom:84px;
  display:block;
  color:#fff;
  font-family:'Archivo Black',sans-serif;
  font-size:48px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-align:left;
  text-align-last:left;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 18px rgba(0,0,0,.24);
  opacity:0;
  filter:blur(2px);
  pointer-events:none;
  will-change:opacity,filter;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-bonneville-wide-title{
  z-index:12;
  left:32px;
  right:auto;
  bottom:84px;
  display:flex;
  column-gap:.62em;
  width:max-content;
  max-width:calc(100% - 64px);
  font-size:40px;
  opacity:1;
  filter:none;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-bonneville-title-beat{
  display:inline-block;
  opacity:0;
  filter:blur(2px);
  transform:translate3d(0,8px,0);
  will-change:opacity,filter,transform;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"] .vision-bonneville-tagline{
  position:absolute;
  z-index:12;
  left:32px;
  right:32px;
  bottom:41px;
  display:block;
  width:auto;
  max-width:calc(100% - 64px);
  color:#fff;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:29.333px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:normal;
  white-space:nowrap;
  text-align:left;
  text-align-last:left;
  text-shadow:0 1px 2px rgba(0,0,0,.78),0 0 18px rgba(0,0,0,.3);
  opacity:0;
  filter:blur(2px);
  transform:translate3d(0,10px,0);
  pointer-events:none;
  will-change:opacity,filter,transform;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-origin-sheet{
  animation:landHorizonOpen 3.4s linear both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-lid-upper{
  animation:landUpperLidOpen 3.4s linear both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-lid-lower{
  animation:landLowerLidOpen 3.4s linear both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-origin-curtain{
  animation:none;
  opacity:0;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-origin-prologue{
  animation:landOriginPrologue 3.4s linear both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-title-land{
  animation:landTitleBeatReveal .94s cubic-bezier(.18,.78,.18,1) 2.78s both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-title-man{
  animation:landTitleBeatReveal .94s cubic-bezier(.18,.78,.18,1) 3.38s both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-title-speed{
  animation:landTitleBeatReveal .94s cubic-bezier(.18,.78,.18,1) 3.98s both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-tagline{
  animation:landTaglineBoom .94s cubic-bezier(.16,.84,.18,1) 5.05s both;
}

#p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-course{
  animation:bonnevilleCourseArrive 16s cubic-bezier(.42,0,.58,1) 2.85s infinite alternate both;
}

/* VIEW 05 — the late sun sits behind the left mountains, so the vehicle's
   weight projects forward toward the viewer. The four compact patches keep
   both near and far tyres physically attached to the salt. */
#p2 .vision-horse-wide-image{
  z-index:1;
}

#p2 .vision-horse-ground-shadow{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  overflow:hidden;
  pointer-events:none;
  transform-origin:92% 59.8%;
  will-change:transform,opacity;
  mix-blend-mode:multiply;
}

#p2 .vision-horse-ground-shadow::before{
  content:"";
  position:absolute;
  left:calc(27.5% + 30px);
  top:50.6%;
  width:64%;
  height:44%;
  border-radius:12% 24% 78% 70% / 7% 12% 100% 100%;
  background:
    radial-gradient(ellipse 45% 128% at 0 -4%,
      rgba(11,17,24,.56) 0%,
      rgba(21,27,33,.36) 43%,
      rgba(40,44,47,0) 98%),
    radial-gradient(ellipse 80% 128% at 48% -4%,
      rgba(12,18,25,.72) 0%,
      rgba(20,26,32,.59) 19%,
      rgba(30,35,40,.4) 45%,
      rgba(39,43,46,.21) 70%,
      rgba(47,50,52,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 10%,rgba(0,0,0,.88) 31%,rgba(0,0,0,.45) 67%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 10%,rgba(0,0,0,.88) 31%,rgba(0,0,0,.45) 67%,transparent 100%);
  filter:blur(13px);
  opacity:.73;
  transform:rotate(-2.2deg) skewX(58deg);
  transform-origin:0 0;
}

#p2 .vision-horse-ground-shadow::after{
  content:"";
  position:absolute;
  left:28.5%;
  top:50.4%;
  width:65%;
  height:8.5%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 12%,
    rgba(13,19,26,.5) 0%,
    rgba(24,30,37,.34) 38%,
    rgba(35,39,43,.1) 68%,
    rgba(40,43,46,0) 100%);
  filter:blur(4.2px);
  opacity:.74;
  transform:rotate(1.4deg);
}

#p2 .vision-horse-tire-shadow{
  position:absolute;
  z-index:3;
  display:block;
  height:3%;
  border-radius:50%;
  background:radial-gradient(ellipse,
    rgba(8,14,20,.72) 0%,
    rgba(18,24,30,.48) 43%,
    rgba(28,33,37,.12) 72%,
    rgba(28,33,37,0) 100%);
  filter:blur(2.6px);
  transform:rotate(2deg);
}

#p2 .vision-horse-tire-shadow--front-far{
  left:41.8%;
  top:50.2%;
  width:10%;
  opacity:.6;
}

#p2 .vision-horse-tire-shadow--front-near{
  left:40.3%;
  top:52.1%;
  width:12%;
  opacity:.94;
}

#p2 .vision-horse-tire-shadow--rear-far{
  left:70.1%;
  top:50.3%;
  width:11%;
  opacity:.58;
}

#p2 .vision-horse-tire-shadow--rear-near{
  left:68.4%;
  top:52.2%;
  width:13%;
  opacity:.92;
}

#p2 .vision-horse-wide-slide:not(.is-hidden) .vision-horse-ground-shadow{
  animation:horseBonnevillePullBack 6.8s cubic-bezier(.18,.72,.16,1) both;
}

/* The question initiates the pullback: it resolves immediately on the click
   and remains visible throughout the camera move. */
#p2 .vision-horse-wide-slide:not(.is-hidden) .vision-horse-wide-question{
  animation:horseWideQuestionReveal .82s cubic-bezier(.2,.72,.2,1) .08s both;
}

#p2 .vision-bonneville-course{
  position:absolute;
  z-index:8;
  inset:0;
  display:none;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  transform:translate3d(185px,0,0);
  will-change:transform,opacity;
}

#p2 .vision-bonneville-course-rig{
  opacity:1;
}

#p2 .vision-bonneville-wide-slide:not(.is-hidden) .vision-bonneville-course{
  animation:bonnevilleCourseArrive 16s cubic-bezier(.42,0,.58,1) infinite alternate both;
}

#p2 .vision-bonneville-course-line{
  fill:none;
  stroke:rgba(247,251,244,.78);
  stroke-width:3.2;
  stroke-dasharray:13 17;
  vector-effect:non-scaling-stroke;
  opacity:.9;
  filter:drop-shadow(0 1px 2px rgba(20,27,22,.48));
}

#p2 .vision-bonneville-course-line--inner{
  stroke-width:2.1;
  stroke-dasharray:8 14;
  opacity:.72;
}

#p2 .vision-bonneville-mile-marker line,
#p2 .vision-bonneville-start-gate > line,
#p2 .vision-bonneville-start-gate > path:not(.vision-bonneville-start-chevron){
  fill:none;
  stroke:#f7fbf4;
  stroke-width:3.7;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 2px 2px rgba(44,49,43,.35));
}

#p2 .vision-bonneville-mile-marker path,
#p2 .vision-bonneville-start-chevron{
  fill:#69be12;
  stroke:rgba(247,251,244,.92);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

#p2 .vision-bonneville-mile-marker--far{opacity:.72;transform-origin:0 35px;}
#p2 .vision-bonneville-mile-marker--mid{opacity:.92;transform-origin:0 55px;}

#p2 .vision-bonneville-start-gate{
  opacity:1;
}

#p2 .vision-bonneville-start-line{
  stroke-width:4.8 !important;
  stroke-dasharray:18 8;
}

#p2 .vision-bonneville-start-glint{
  fill:#fff;
  stroke:#69be12;
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  filter:url(#bonneville-course-glow);
  transform-box:fill-box;
  transform-origin:center;
  animation:bonnevilleCourseGlint 2.9s ease-in-out infinite;
}

#p2 .vision-bonneville-start-glint--late{animation-delay:1.25s;}

#p2 .vision-bonneville-wide-title{
  z-index:12;
  position:absolute;
  z-index:4;
  left:32px;
  right:32px;
  bottom:50px;
  color:#fff;
  font-family:'Archivo Black',sans-serif;
  font-size:36.6px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-align:center;
  text-align-last:center;
  text-shadow:
    0 1px 2px rgba(0,0,0,.72),
    0 0 18px rgba(0,0,0,.24);
  pointer-events:none;
}

/* VIEWS 04–07 — one shared left-hand story spine. */
@media(min-width:901px){
  body:not(.verticale-edition) #p2 .vision-bonneville-wide-title,
  body:not(.verticale-edition) #p2 .vision-horse-wide-question{
    left:32px;
    right:auto;
    width:max-content;
    max-width:calc(100% - 64px);
    text-align:left;
    text-align-last:left;
  }

  body:not(.verticale-edition) #p2 .vision-bonneville-wide-title{
    bottom:50px;
  }

  body:not(.verticale-edition) #p2 .vision-horse-copy{
    left:32px;
    bottom:17px;
    max-width:calc(100% - 64px);
  }

  body:not(.verticale-edition) #p2 .vision-horse-copy .vision-horse-name,
  body:not(.verticale-edition) #p2 .vision-horse-copy .vision-horse-title,
  body:not(.verticale-edition) #p2 .vision-horse-copy .vision-horse-tagline{
    text-align:left;
    text-align-last:left;
  }

  body:not(.verticale-edition) #p2 .vision-horse-slide:not(.vision-horse-equation-slide) .vision-horse-title{
    color:rgba(255,255,255,.97);
    font-size:clamp(34px,2.75vw,44px);
    background-image:none;
    -webkit-text-fill-color:currentColor;
    text-shadow:0 2px 4px rgba(0,0,0,.72),0 0 18px rgba(0,0,0,.3);
  }

  body:not(.verticale-edition) #p2 .vision-horse-slide:not(.vision-horse-equation-slide) .vision-horse-name{
    color:#fff;
    font-size:clamp(30px,calc(1.45vw + 6px),35px);
    background-image:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    -webkit-text-fill-color:currentColor;
    text-shadow:0 2px 4px rgba(0,0,0,.72),0 0 18px rgba(0,0,0,.3);
  }

  body:not(.verticale-edition) #p2 .vision-horse-slide:not(.is-hidden):not(.vision-horse-equation-slide) .vision-horse-title{
    animation:whaleTitleReveal 2.25s cubic-bezier(.2,.72,.2,1) 1.2s both;
  }

  body:not(.verticale-edition) #p2 .vision-horse-slide:not(.is-hidden):not(.vision-horse-equation-slide) .vision-horse-name{
    animation:horseNameReveal 1.35s cubic-bezier(.2,.72,.2,1) .55s both;
  }

  body:not(.verticale-edition) #p2 .vision-horse-slide:not(.vision-horse-equation-slide) .vision-horse-tagline{
    color:rgba(255,255,255,.9);
    text-shadow:0 1px 3px rgba(0,0,0,.78),0 0 14px rgba(0,0,0,.26);
  }

  body:not(.verticale-edition) #p2 .vision-horse-equation{
    left:32px;
    right:auto;
    width:max-content;
    max-width:calc(100% - 64px);
    transform:none;
  }

  body:not(.verticale-edition) #p2 .vision-horse-equation-note,
  body:not(.verticale-edition) #p2 .vision-horse-equation-disclaimer{
    text-align:left;
    text-align-last:left;
  }
}

@keyframes horseTitleFluoresce{
  0%,22%{background-position:100% 50%}
  58%,100%{background-position:0% 50%}
}

/* VERTICALE’ — keep the two longest story titles fully inside the phone frame. */
@media(max-width:600px) and (orientation:portrait){
  body.verticale-edition #p2 .vision-whale-story-title{
    font-size:20px;
  }

  body.verticale-edition #p2 .vision-bonneville-wide-title{
    font-size:21px;
  }

  body.verticale-edition #p2 .vision-bonneville-wide-image{
    width:160%;
    transform:translate3d(0,0,0) scale(1.015);
  }

  body.verticale-edition #p2 .vision-bonneville-wide-slide.is-sequencing .vision-bonneville-wide-image{
    animation-name:bonnevillePanVerticalSafe;
  }
}

@keyframes bonnevilleGateReveal{
  0%{transform:translate3d(0,0,0) scale(1.015);}
  100%{transform:translate3d(-29%,0,0) scale(1.015);}
}

@keyframes landOriginPrologue{
  0%{opacity:0;filter:blur(1px);}
  4%,70%{opacity:1;filter:blur(0);}
  84%,100%{opacity:0;filter:blur(2px);}
}

@keyframes landHorizonOpen{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
  50%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1.025);
    filter:blur(0);
  }
  70%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1.075);
    filter:blur(0);
  }
  80%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1.17);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translate3d(0,0,0) scale(1.34);
    filter:blur(8px);
  }
}

@keyframes landUpperLidOpen{
  0%{d:path("M 0 0 H 1000 V 270 H 660 C 610 270 550 272 500 272 C 450 272 390 270 340 270 H 0 Z");}
  50%{d:path("M 0 0 H 1000 V 273.5 H 745 C 707.5 230.5 606.5 197 500 197 C 393.5 197 292.5 230.5 255 273.5 H 0 Z");}
  70%{d:path("M 0 0 H 1000 V 277.7 H 847 C 824.5 183.1 674.3 107 500 107 C 325.7 107 175.5 183.1 153 277.7 H 0 Z");}
  80%{d:path("M 0 0 H 1000 V 281.2 H 932 C 922 143.6 730.8 32 500 32 C 269.2 32 78 143.6 68 281.2 H 0 Z");}
  100%{d:path("M 0 0 H 1000 V 284 H 1000 C 1000 112 776 -28 500 -28 C 224 -28 0 112 0 284 H 0 Z");}
}

@keyframes landLowerLidOpen{
  0%{d:path("M 0 270 H 340 C 390 270 450 267 500 267 C 550 267 610 270 660 270 H 1000 V 520 H 0 Z");}
  50%{d:path("M 0 266.5 H 255 C 292.5 309.5 393.5 342.25 500 342.25 C 606.5 342.25 707.5 309.5 745 266.5 H 1000 V 520 H 0 Z");}
  70%{d:path("M 0 262.3 H 153 C 175.5 356.9 325.7 432.55 500 432.55 C 674.3 432.55 824.5 356.9 847 262.3 H 1000 V 520 H 0 Z");}
  80%{d:path("M 0 258.8 H 68 C 78 396.4 269.2 507.8 500 507.8 C 730.8 507.8 922 396.4 932 258.8 H 1000 V 520 H 0 Z");}
  100%{d:path("M 0 256 H 0 C 0 428 224 568 500 568 C 776 568 1000 428 1000 256 H 1000 V 520 H 0 Z");}
}

@keyframes landHorizonCurtain{
  0%,8%{opacity:1;}
  13%,100%{opacity:0;}
}

@keyframes landStoryTitleReveal{
  0%{opacity:0;filter:none;transform:none;}
  100%{opacity:1;filter:none;transform:none;}
}

@keyframes landTitleBeatReveal{
  0%{opacity:0;filter:blur(2px);transform:translate3d(0,8px,0);}
  68%,100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
}

@keyframes landTaglineBoom{
  0%{opacity:0;filter:blur(2px);transform:translate3d(0,10px,0);}
  64%,100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
}

@keyframes landOriginPrologueReduced{
  0%{opacity:0;filter:none;}
  3%,32%{opacity:1;filter:none;}
  44%,100%{opacity:0;filter:none;}
}

@keyframes landHorizonOpenReduced{
  0%,8%{opacity:1;}
  48%,100%{opacity:0;}
}

@keyframes bonnevilleCourseArrive{
  0%,18%{opacity:0;transform:translate3d(185px,0,0);}
  32%{opacity:.58;}
  48%{opacity:.92;}
  100%{opacity:1;transform:translate3d(0,0,0);}
}

@keyframes bonnevilleCourseGlint{
  0%,72%,100%{opacity:.38;transform:scale(.78);}
  82%{opacity:1;transform:scale(1.5);}
  90%{opacity:.62;transform:scale(1);}
}

@keyframes bonnevillePanVerticalSafe{
  0%,10%{transform:translate3d(0,0,0) scale(1.015);}
  100%{transform:translate3d(-36%,0,0) scale(1.015);}
}

#p2 .vision-air-origin-slide{
  /* Air gathers behind the black cloth before its pressure makes the curtain yield. */
  --air-story-delay:.55s;
  isolation:isolate;
  overflow:hidden;
  padding:0;
  background:#061a2b;
}

#p2 .vision-air-origin-image{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  will-change:opacity,transform,filter;
}

#p2 .vision-air-origin-image--sky{
  opacity:1;
  transform:scale(1.04);
}

/* Three registered plates now carry the sequence: connected flow, clean wing,
   then a genuinely detached wing whose wake ends before the frame. */
#p2 .vision-air-current{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  transform:translate3d(-6%,0,0) scale(1.15);
  transform-origin:50% 50%;
  will-change:transform;
}

#p2 .vision-air-analysis{
  position:absolute;
  z-index:8;
  top:8%;
  right:5.5%;
  width:min(38%,430px);
  display:grid;
  justify-items:end;
  gap:clamp(4px,.62vh,8px);
  pointer-events:none;
  text-align:right;
  mix-blend-mode:screen;
}

#p2 .vision-air-wing-pattern-lock{
  position:absolute;
  inset:0;
  z-index:7;
  overflow:hidden;
  pointer-events:none;
  transform:translate3d(-6%,0,0) scale(1.15);
  transform-origin:50% 50%;
  mix-blend-mode:screen;
}

#p2 .vision-air-wing-lock-render{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  overflow:hidden;
  background:#dfffc7;
  isolation:isolate;
  -webkit-mask-image:radial-gradient(ellipse 48% 25% at 64% 48%,#000 0 91%,rgba(0,0,0,.62) 96%,transparent 100%);
  mask-image:radial-gradient(ellipse 48% 25% at 64% 48%,#000 0 91%,rgba(0,0,0,.62) 96%,transparent 100%);
  will-change:opacity,filter;
}

#p2 .vision-air-wing-lock-render img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  mix-blend-mode:multiply;
}

#p2 .vision-air-wing-lock-render--pattern img{
  filter:grayscale(1) contrast(38) brightness(.7);
}

#p2 .vision-air-wing-lock-render--outline img{
  filter:grayscale(1) contrast(96) brightness(.57);
}

#p2 .vision-air-wing-crosshair,
#p2 .vision-air-wing-crosshair-center{
  position:absolute;
  z-index:3;
  display:block;
  opacity:0;
  pointer-events:none;
  color:var(--green);
  filter:drop-shadow(0 0 2px rgba(82,160,4,.76));
}

#p2 .vision-air-wing-crosshair--horizontal{
  top:48%;
  left:calc(29% - 50px);
  width:68%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(82,160,4,.98) 9% 91%,transparent);
  transform:scaleX(0);
  transform-origin:48.5% 50%;
}

#p2 .vision-air-wing-crosshair--vertical{
  top:29%;
  left:calc(62% - 50px);
  width:1px;
  height:39%;
  background:linear-gradient(180deg,transparent,rgba(82,160,4,.98) 12% 88%,transparent);
  transform:scaleY(0);
  transform-origin:50% 49%;
}

#p2 .vision-air-wing-crosshair-center{
  top:calc(48% - 10px);
  left:calc(62% - 60px);
  width:20px;
  height:20px;
  border:1px solid rgba(82,160,4,.98);
  border-radius:50%;
  box-shadow:0 0 5px rgba(82,160,4,.64),inset 0 0 3px rgba(82,160,4,.38);
  transform:scale(.45);
}

#p2 .vision-air-analysis-line{
  display:block;
  opacity:0;
  color:rgba(245,252,255,.82);
  font-family:'Share Tech Mono','SFMono-Regular',Menlo,Consolas,monospace;
  font-size:clamp(11px,1.08vw,17px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.075em;
  white-space:nowrap;
  text-shadow:0 0 5px rgba(222,248,255,.46),0 0 16px rgba(95,199,255,.25);
  will-change:opacity,transform,filter;
}

#p2 .vision-air-analysis-line--live,
#p2 .vision-air-analysis-line--lock{
  color:rgba(128,255,77,.92);
  text-shadow:0 0 5px rgba(128,255,77,.62),0 0 18px rgba(69,208,33,.34);
}

#p2 .vision-air-analysis-line--live{
  margin-bottom:clamp(2px,.35vh,5px);
  font-size:clamp(10px,.9vw,14px);
  letter-spacing:.18em;
}

#p2 .vision-air-analysis-line--lock{
  margin-top:clamp(2px,.35vh,5px);
  font-size:clamp(10px,.92vw,14px);
  letter-spacing:.14em;
  color:var(--green);
  text-shadow:0 0 4px rgba(82,160,4,.66),0 0 14px rgba(82,160,4,.34);
}

#p2 .vision-air-origin-image--flow{
  z-index:2;
  opacity:0;
  transform:scale(1.055);
  transform-origin:100% 50%;
}

/* A second, clean companion plate carries only the upper and lower wing
   contours. It periodically covers the full-line plate, letting the incoming
   white streamlines disappear and return as travelling light rather than sit. */
#p2 .vision-air-isolated-wing{
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  opacity:0;
  transform:scale(1);
  transform-origin:100% 50%;
  mix-blend-mode:normal;
  will-change:opacity,transform,filter;
}

#p2 .vision-air-detached-wing{
  position:absolute;
  inset:0;
  z-index:7;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  opacity:0;
  transform:scale(1);
  transform-origin:100% 50%;
  mix-blend-mode:normal;
  will-change:opacity,filter;
}

/* VIEW 08 — the clean plate is reused as two closely registered ghosts:
   upper wing and lower wing. No cloudy wake or corrective veil remains. */
#p2 .vision-air-wing-ghost{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  filter:blur(1.8px) brightness(1.08) saturate(.9);
  will-change:opacity,transform,filter;
}

#p2 .vision-air-wing-ghost--upper{
  transform-origin:34% 50%;
  -webkit-mask-image:radial-gradient(ellipse 55% 32% at 55% 41%,#000 0%,#000 38%,rgba(0,0,0,.66) 61%,transparent 88%);
  mask-image:radial-gradient(ellipse 55% 32% at 55% 41%,#000 0%,#000 38%,rgba(0,0,0,.66) 61%,transparent 88%);
}

#p2 .vision-air-wing-ghost--lower{
  transform-origin:34% 50%;
  -webkit-mask-image:radial-gradient(ellipse 55% 32% at 55% 59%,#000 0%,#000 38%,rgba(0,0,0,.66) 61%,transparent 88%);
  mask-image:radial-gradient(ellipse 55% 32% at 55% 59%,#000 0%,#000 38%,rgba(0,0,0,.66) 61%,transparent 88%);
}

/* Front pressure and the much smaller tail answer one another instead of
   moving simultaneously: a clean push-me-pull-you rhythm. */
#p2 .vision-air-line-surge{
  position:absolute;
  inset:0;
  z-index:8;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  transform-origin:100% 50%;
  will-change:opacity,transform,filter;
}

#p2 .vision-air-line-surge--fast{
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 57%,rgba(0,0,0,.62) 67%,transparent 77%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 57%,rgba(0,0,0,.62) 67%,transparent 77%);
  filter:contrast(1.62) brightness(1.16) saturate(.6) blur(.35px);
}

#p2 .vision-air-line-surge--slow{
  mix-blend-mode:soft-light;
  -webkit-mask-image:linear-gradient(90deg,transparent 52%,rgba(0,0,0,.32) 59%,#000 67%,rgba(0,0,0,.48) 75%,transparent 84%);
  mask-image:linear-gradient(90deg,transparent 52%,rgba(0,0,0,.32) 59%,#000 67%,rgba(0,0,0,.48) 75%,transparent 84%);
  filter:contrast(1.32) brightness(1.12) saturate(.66) blur(1.25px);
}

#p2 .vision-air-tail-veil{
  position:absolute;
  z-index:6;
  top:0;
  right:0;
  bottom:0;
  width:30%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent 0%,rgba(3,44,86,.2) 28%,rgba(2,35,72,.68) 68%,rgba(1,25,57,.9) 100%);
}

#p2 .vision-air-outrage{
  position:absolute;
  inset:0;
  z-index:9;
  overflow:hidden;
  pointer-events:none;
}

#p2 .vision-air-outrage-bow{
  position:absolute;
  right:-4%;
  pointer-events:none;
  opacity:0;
  transform-origin:100% 50%;
  will-change:opacity,transform,filter;
}

#p2 .vision-air-outrage-bow{
  right:0;
  width:94%;
  height:24%;
  border-radius:52%;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 83%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 83%,transparent 100%);
}

#p2 .vision-air-outrage-bow--upper{
  top:28%;
  border-top:1.5px solid rgba(238,253,255,.54);
  box-shadow:0 -3px 10px rgba(187,233,248,.18);
  filter:blur(.75px);
}

#p2 .vision-air-origin-title{
  position:absolute;
  z-index:6;
  left:32px;
  bottom:50px;
  color:#fff;
  font-family:'Archivo Black',sans-serif;
  font-size:42px;
  font-weight:400;
  line-height:1;
  letter-spacing:.03em;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 20px rgba(0,28,62,.32);
  display:flex;
  align-items:baseline;
  gap:.34em;
  width:max-content;
  max-width:calc(100% - 64px);
  height:auto;
  opacity:1;
  pointer-events:none;
}

/* ELEMENT ORIGIN GRAMMAR — AIR
   The atmosphere gets its own creation beat: a black field, one declarative
   line, then pressure reveals the field as cloth before the gust takes it. */
@property --air-curtain-cut{
  syntax:"<percentage>";
  inherits:true;
  initial-value:.01%;
}

#p2 .vision-air-origin-curtain{
  --air-curtain-cut:.01%;
  position:absolute;
  z-index:20;
  top:0;
  right:auto;
  bottom:auto;
  left:-5%;
  width:105%;
  height:100%;
  display:block;
  isolation:isolate;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.76) 0%,
      rgba(4,6,7,.34) 42%,
      rgba(0,0,0,.7) 100%),
    url("optimized-v39/images/vision-air-curtain-fabric-wrinkle--c0feab1e26dc.lossless.webp") center / cover no-repeat,
    url("optimized-v39/images/vision-air-curtain-black-folds--5fd3fae0640c.lossless.webp") center / 100% 100% no-repeat,
    #000;
  background-blend-mode:multiply,soft-light,normal;
  pointer-events:none;
  transform:translate3d(0,0,0);
  transform-origin:right center;
  -webkit-mask-image:radial-gradient(ellipse var(--air-curtain-cut) 118% at 0 50%,transparent 0 99%,rgba(0,0,0,.38) 99.35%,rgba(0,0,0,.78) 99.7%,#000 100%);
  mask-image:radial-gradient(ellipse var(--air-curtain-cut) 118% at 0 50%,transparent 0 99%,rgba(0,0,0,.38) 99.35%,rgba(0,0,0,.78) 99.7%,#000 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  filter:blur(0);
  will-change:transform,filter;
}

#p2 .vision-air-origin-curtain::before,
#p2 .vision-air-origin-curtain::after{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}

#p2 .vision-air-origin-curtain::before{
  z-index:1;
  background:
    linear-gradient(102deg,
      transparent 0 36%,
      rgba(255,255,255,.064) 42%,
      rgba(0,0,0,.68) 47%,
      transparent 54%) -55% 0 / 72% 100% repeat-x,
    linear-gradient(88deg,
      transparent 0 42%,
      rgba(255,255,255,.045) 47%,
      rgba(0,0,0,.56) 51%,
      transparent 57%) -32% 0 / 41% 100% repeat-x,
    linear-gradient(97deg,
      transparent 0 44%,
      rgba(255,255,255,.028) 48%,
      rgba(0,0,0,.46) 51%,
      transparent 55%) -16% 0 / 23% 100% repeat-x,
    linear-gradient(90deg,#000 0%,#050505 38%,#000 66%,#030303 100%);
  background-position:-55% 0,-32% 0,-16% 0,0 0;
  background-size:48% 100%,28% 100%,16% 100%,100% 100%;
  opacity:0;
  filter:contrast(1.75);
  will-change:opacity,background-position,background-size,transform,filter;
}

#p2 .vision-air-origin-curtain::after{
  z-index:2;
  background:
    radial-gradient(ellipse 22% 66% at 45% 51%,
      rgba(255,255,255,.072) 0%,
      rgba(255,255,255,.026) 38%,
      rgba(0,0,0,.48) 66%,
      transparent 78%),
    linear-gradient(101deg,
      transparent 0 37%,
      rgba(255,255,255,.032) 45%,
      rgba(0,0,0,.38) 54%,
      transparent 64%);
  opacity:0;
  transform:scale(.72,.84);
  will-change:opacity,transform,filter;
}

#p2 .vision-air-curtain-hem{
  position:absolute;
  z-index:3;
  inset:0;
  display:block;
  background:repeating-conic-gradient(from -90deg at 0 50%,
    rgba(232,238,242,.78) 0deg 1deg,
    rgba(118,150,171,.32) 1deg 1.7deg,
    transparent 1.7deg 4.1deg);
  -webkit-mask-image:radial-gradient(ellipse var(--air-curtain-cut) 118% at 0 50%,
    transparent 0 100.08%,
    #000 100.16% 100.42%,
    transparent 100.5% 100.82%,
    #000 100.9% 101.12%,
    transparent 101.2%);
  mask-image:radial-gradient(ellipse var(--air-curtain-cut) 118% at 0 50%,
    transparent 0 100.08%,
    #000 100.16% 100.42%,
    transparent 100.5% 100.82%,
    #000 100.9% 101.12%,
    transparent 101.2%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  opacity:0;
  pointer-events:none;
  will-change:opacity,filter;
}

#p2 .vision-air-origin-prologue{
  position:absolute;
  z-index:21;
  left:32px;
  right:32px;
  bottom:84px;
  display:block;
  color:#fff;
  font-family:'Archivo Black',sans-serif;
  font-size:48px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-align:left;
  text-align-last:left;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 18px rgba(0,0,0,.24);
  opacity:0;
  filter:blur(2px);
  pointer-events:none;
  transform:translate3d(0,0,0);
  will-change:opacity,filter,transform;
}

#p2 .vision-air-origin-prologue::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  display:block;
  color:transparent;
  background:
    linear-gradient(96deg,
      transparent 0 9%,
      rgba(0,0,0,.2) 14%,
      rgba(2,7,12,.74) 20%,
      transparent 29% 38%,
      rgba(16,27,36,.62) 45%,
      transparent 53% 61%,
      rgba(0,0,0,.7) 68%,
      rgba(28,43,54,.38) 74%,
      transparent 82% 100%);
  background-size:142% 100%;
  background-position:-58% 0;
  -webkit-background-clip:text;
  background-clip:text;
  opacity:0;
  pointer-events:none;
  will-change:opacity,background-position,filter,transform;
}

#p2 .vision-air-origin-word{
  position:relative;
  display:block;
  opacity:0;
  white-space:nowrap;
  will-change:opacity,transform,filter;
}

/* HORIZONTALE BECAUSE HOUSE LINE — one left edge, one title floor.
   Architecture keeps its established internal story system; Verticale’ is untouched. */
@media(min-width:901px){
  body:not(.verticale-edition) #p2 .vision-sea-origin-title,
  body:not(.verticale-edition) #p2 .vision-whale-story-title,
  body:not(.verticale-edition) #p2 .vision-whale-title,
  body:not(.verticale-edition) #p2 .vision-bonneville-wide-title,
  body:not(.verticale-edition) #p2 .vision-air-origin-title{
    left:32px;
    bottom:50px;
  }

  body:not(.verticale-edition) #p2 .vision-whale-title{
    max-width:calc(100% - 64px);
  }

  /* The two-line whale thought clears the lowered title without entering the rail. */
  body:not(.verticale-edition) #p2 .vision-whale-question{
    left:32px;
    bottom:7px;
    max-width:calc(100% - 64px);
    font-size:18px;
    line-height:1.06;
  }

  /* Four separate masses in the air, gathering into one clean line. */
  body:not(.verticale-edition) #p2 .vision-air-origin-title{
    gap:.58em;
  }

  /* Lower the live calculation field as one centered instrument cluster. */
  body:not(.verticale-edition) #p2 .vision-air-analysis{
    top:14%;
    justify-items:center;
    text-align:center;
  }
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-image--sky{
  animation:airSkyLand 1.325s cubic-bezier(.22,.7,.18,1) calc(var(--air-story-delay) + .025s) both;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-current{
  animation:
    airPackageVerticalBreath 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airPackageVerticalBreath 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-image--flow{
  animation:
    airFlowStreamIn .925s cubic-bezier(.2,.72,.18,1) calc(var(--air-story-delay) - .1s) both,
    airPlateConnectedStretch 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airPlateConnectedStretch 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-isolated-wing{
  animation:
    airPlateCleanStretch 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airPlateCleanStretch 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-detached-wing{
  animation:
    airPlateDetachedStretch 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airPlateDetachedStretch 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-wing-ghost--upper{
  animation:
    airWingUpperGhost 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airWingUpperGhost 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-wing-ghost--lower{
  animation:
    airWingLowerGhost 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airWingLowerGhost 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-line-surge--fast{
  animation:
    airFrontPush 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airFrontPush 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-line-surge--slow{
  animation:
    airTailPull 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airTailPull 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-tail-veil{
  animation:
    airTailVeil 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airTailVeil 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-outrage-bow--upper{
  animation:
    airOutrageBow 1.525s cubic-bezier(.42,.14,.92,.32) calc(var(--air-story-delay) + .825s) 1 both,
    airOutrageBow 1.525s linear calc(var(--air-story-delay) + 2.35s) infinite alternate-reverse;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-word{
  animation:airOriginWordGather 1.325s cubic-bezier(.2,.72,.2,1) calc(var(--air-story-delay) + var(--air-word-delay)) both;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-analysis-line{
  animation:airEquationCascade 2.4s ease-in-out calc(var(--air-story-delay) + var(--air-eq-delay)) infinite;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-wing-lock-render--pattern{
  animation:airWingGreenPattern 3.05s ease-in-out calc(var(--air-story-delay) + 3.175s) infinite;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-wing-lock-render--outline{
  animation:airWingCleanOutline 3.05s ease-in-out calc(var(--air-story-delay) + 3.175s) infinite;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-wing-crosshair--horizontal{
  animation:airWingCrosshairHorizontal 3.05s ease-in-out calc(var(--air-story-delay) + 3.175s) infinite;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-wing-crosshair--vertical{
  animation:airWingCrosshairVertical 3.05s ease-in-out calc(var(--air-story-delay) + 3.175s) infinite;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-wing-crosshair-center{
  animation:airWingCrosshairCenter 3.05s ease-in-out calc(var(--air-story-delay) + 3.175s) infinite;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-analysis-line--lock{
  animation:airWingPatternLockedLabel 3.05s ease-in-out calc(var(--air-story-delay) + 3.175s) infinite;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain{
  animation:airOriginCurtainBlast 2.82s cubic-bezier(.42,0,.12,1) both;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-prologue{
  animation:airOriginPrologueBlast 2.82s cubic-bezier(.42,0,.12,1) both;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-prologue::before{
  animation:airPrologueFoldShadow 2.82s cubic-bezier(.42,0,.12,1) both;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain::before{
  animation:airCurtainFoldsWake 2.82s cubic-bezier(.42,0,.12,1) both;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain::after{
  animation:airCurtainPressurePulse 2.82s cubic-bezier(.42,0,.12,1) both;
}

#p2 .vision-air-origin-slide.is-sequencing .vision-air-curtain-hem{
  animation:airCurtainHemStitch 2.82s linear both;
}

@keyframes airOriginCurtainBlast{
  0%,55.5%{
    transform:translate3d(0,0,0) scaleX(1);
    --air-curtain-cut:.01%;
    filter:blur(0);
  }
  59%{
    transform:translate3d(-.35%,0,0) scaleX(1.004);
    --air-curtain-cut:.01%;
    filter:blur(0);
  }
  63%{
    transform:translate3d(.25%,0,0) scaleX(.998);
    --air-curtain-cut:.01%;
    filter:blur(0);
  }
  67%{
    transform:translate3d(-.18%,0,0) scaleX(1.006);
    --air-curtain-cut:.01%;
    filter:blur(0);
  }
  71.5%{
    transform:translate3d(0,0,0) scaleX(1.012);
    --air-curtain-cut:.01%;
    filter:blur(0);
  }
  79%{
    transform:translate3d(2%,0,0) scaleX(.995);
    --air-curtain-cut:12%;
    filter:
      blur(.3px)
      drop-shadow(-1px 0 .35px rgba(226,238,246,.58))
      drop-shadow(-4px 0 4px rgba(92,146,184,.22));
  }
  87%{
    transform:translate3d(15%,0,0) scaleX(.92);
    --air-curtain-cut:40%;
    filter:
      blur(1.5px)
      drop-shadow(-1.5px 0 .6px rgba(232,241,247,.68))
      drop-shadow(-7px 0 6px rgba(91,151,191,.3));
  }
  94%{
    transform:translate3d(52%,0,0) scaleX(.72);
    --air-curtain-cut:85%;
    filter:
      blur(4px)
      drop-shadow(-2px 0 1px rgba(235,243,248,.54))
      drop-shadow(-12px 0 10px rgba(82,142,184,.24));
  }
  100%{
    transform:translate3d(115%,0,0) scaleX(.45);
    --air-curtain-cut:155%;
    filter:
      blur(8px)
      drop-shadow(-3px 0 2px rgba(235,243,248,.38))
      drop-shadow(-18px 0 14px rgba(82,142,184,.18));
  }
}

@keyframes airOriginPrologueBlast{
  0%,55.5%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scaleX(1);}
  59%{opacity:1;filter:blur(0);transform:translate3d(-.5vw,0,0) scaleX(1.004);}
  63%{opacity:1;filter:blur(0);transform:translate3d(.3vw,0,0) scaleX(.998);}
  67%{opacity:1;filter:blur(0);transform:translate3d(-.2vw,0,0) scaleX(1.006);}
  71.5%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scaleX(1);}
  79%{opacity:1;filter:blur(.3px);transform:translate3d(5vw,0,0) scaleX(.98);}
  87%{opacity:1;filter:blur(1.5px);transform:translate3d(32vw,0,0) scaleX(.86);}
  94%{opacity:1;filter:blur(4px);transform:translate3d(78vw,0,0) scaleX(.65);}
  100%{opacity:1;filter:blur(8px);transform:translate3d(120vw,0,0) scaleX(.45);}
}

@keyframes airPrologueFoldShadow{
  0%,55.5%{
    opacity:0;
    background-position:-58% 0;
    filter:blur(0);
    transform:scaleX(1);
  }
  59%{
    opacity:.24;
    background-position:-42% 0;
    filter:blur(0);
    transform:scaleX(.998);
  }
  63%{
    opacity:.5;
    background-position:-22% 0;
    filter:blur(.08px);
    transform:scaleX(.986);
  }
  67%{
    opacity:.32;
    background-position:-5% 0;
    filter:blur(0);
    transform:scaleX(.995);
  }
  71.5%{
    opacity:.64;
    background-position:18% 0;
    filter:blur(.14px);
    transform:scaleX(.972);
  }
  79%{
    opacity:.34;
    background-position:45% 0;
    filter:blur(.2px);
    transform:scaleX(.988);
  }
  87%{
    opacity:.18;
    background-position:86% 0;
    filter:blur(.5px);
    transform:scaleX(.95);
  }
  94%{
    opacity:.1;
    background-position:136% 0;
    filter:blur(1.4px);
    transform:scaleX(.82);
  }
  100%{
    opacity:0;
    background-position:188% 0;
    filter:blur(3px);
    transform:scaleX(.58);
  }
}

@keyframes airCurtainFoldsWake{
  0%,55.5%{
    opacity:0;
    background-position:-55% 0,-32% 0,-16% 0,0 0;
    background-size:48% 100%,28% 100%,16% 100%,100% 100%;
    transform:scaleX(1);
    filter:contrast(1.85) brightness(.88);
  }
  63%{
    opacity:.34;
    background-position:-36% 0,-20% 0,-10% 0,0 0;
    background-size:54% 100%,31% 100%,18% 100%,100% 100%;
    transform:scaleX(1.002);
    filter:contrast(1.72) brightness(.92);
  }
  72%{
    opacity:.94;
    background-position:-10% 0,4% 0,12% 0,0 0;
    background-size:72% 100%,41% 100%,23% 100%,100% 100%;
    transform:scaleX(1.012);
    filter:contrast(1.42) brightness(.97);
  }
  90%{
    opacity:.72;
    background-position:38% 0,68% 0,96% 0,0 0;
    background-size:92% 100%,55% 100%,31% 100%,100% 100%;
    transform:scaleX(.96);
    filter:contrast(1.18) brightness(.99);
  }
  100%{
    opacity:.32;
    background-position:126% 0,168% 0,214% 0,0 0;
    background-size:122% 100%,77% 100%,46% 100%,100% 100%;
    transform:scaleX(.72);
    filter:contrast(1) brightness(1.01) blur(.4px);
  }
}

@keyframes airCurtainPressurePulse{
  0%,55.5%{opacity:0;transform:translate3d(0,0,0) scale(.72,.84);filter:blur(0);}
  63%{opacity:.36;transform:translate3d(0,0,0) scale(.88,.94);filter:blur(0);}
  71.5%{opacity:1;transform:translate3d(1.5%,0,0) scale(1.08,1.04);filter:blur(.2px);}
  80%{opacity:.42;transform:translate3d(8%,0,0) scale(1.26,1.08);filter:blur(1px);}
  87%,100%{opacity:0;transform:translate3d(24%,0,0) scale(1.5,1.12);filter:blur(3px);}
}

@keyframes airCurtainHemStitch{
  0%,76%{opacity:0;filter:blur(0);}
  79%{opacity:.72;filter:blur(0);}
  87%{opacity:.94;filter:blur(.15px);}
  94%{opacity:.76;filter:blur(.45px);}
  100%{opacity:.34;filter:blur(1.4px);}
}

@keyframes airSkyLand{
  0%{opacity:1;transform:translate3d(0,-1.2%,0) scale(1.055);filter:saturate(.9);}
  28%{opacity:1;transform:translate3d(0,-.3%,0) scale(1.026);filter:saturate(.93);}
  45%{opacity:1;transform:translate3d(0,0,0) scale(1.012);filter:saturate(.96);}
  59%{opacity:.96;transform:translate3d(0,0,0) scale(1.007);filter:saturate(.98);}
  78%{opacity:.48;transform:translate3d(0,0,0) scale(1.003);filter:saturate(1);}
  100%{opacity:0;transform:translate3d(0,0,0) scale(1);filter:saturate(1);}
}

@keyframes airFlowStreamIn{
  0%{opacity:0;transform:translate3d(-1.8%,0,0) scale(1.045);filter:blur(2.2px);}
  18%{opacity:.08;transform:translate3d(-1.45%,0,0) scale(1.038);filter:blur(1.8px);}
  48%{opacity:.44;transform:translate3d(-.65%,0,0) scale(1.023);filter:blur(1px);}
  76%{opacity:.84;transform:translate3d(-.12%,0,0) scale(1.008);filter:blur(.3px);}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);}
}

@keyframes airPackageVerticalBreath{
  0%,10%{transform:translate3d(-6%,0,0) scale(1.15,1.15);}
  23%{transform:translate3d(-6%,0,0) scale(1.15,1.05);}
  35%,49%{transform:translate3d(-6%,0,0) scale(1.15,1.15);}
  61%{transform:translate3d(-6%,0,0) scale(1.15,1.09);}
  72%,100%{transform:translate3d(-6%,0,0) scale(1.15,1.15);}
}

@keyframes airEquationCascade{
  0%,10%{opacity:0;transform:translate3d(0,-9px,0);filter:blur(1.2px);}
  22%{opacity:.72;transform:translate3d(0,0,0);filter:blur(0);}
  48%{opacity:.54;transform:translate3d(-4px,2px,0);filter:blur(0);}
  68%{opacity:.2;transform:translate3d(-8px,7px,0);filter:blur(.35px);}
  86%,100%{opacity:0;transform:translate3d(-12px,14px,0);filter:blur(1px);}
}

@keyframes airWingGreenPattern{
  0%,24%{opacity:0;filter:blur(.65px);background-color:#dfffc7;}
  27%{opacity:.24;filter:blur(.28px);background-color:#c9ff9f;}
  29%{opacity:.54;filter:blur(.08px);background-color:#91e83a;}
  30.5%{opacity:.04;filter:blur(.18px);background-color:#91e83a;}
  33%{opacity:.88;filter:blur(0);background-color:#52A004;}
  35%,42%{opacity:.94;filter:blur(0);background-color:#52A004;}
  46%,100%{opacity:0;filter:blur(.12px);background-color:#52A004;}
}

@keyframes airWingCleanOutline{
  0%,32%{opacity:0;filter:blur(.22px) drop-shadow(0 0 0 rgba(82,160,4,0));background-color:#91e83a;}
  35%{opacity:.22;filter:blur(.08px) drop-shadow(0 0 2px rgba(82,160,4,.3));background-color:#69c80d;}
  37%{opacity:.9;filter:blur(0) drop-shadow(0 0 3px rgba(82,160,4,.56));background-color:#52A004;}
  39%,56%{opacity:1;filter:blur(0) drop-shadow(0 0 4px rgba(82,160,4,.62));background-color:#52A004;}
  59%{opacity:.1;filter:blur(.16px) drop-shadow(0 0 1px rgba(82,160,4,.2));background-color:#52A004;}
  63%{opacity:.38;filter:blur(0) drop-shadow(0 0 2px rgba(82,160,4,.42));background-color:#52A004;}
  67%,100%{opacity:0;filter:blur(.25px) drop-shadow(0 0 0 rgba(82,160,4,0));background-color:#52A004;}
}

@keyframes airWingCrosshairHorizontal{
  0%,42%{opacity:0;transform:scaleX(0);}
  47%,56%{opacity:.8;transform:scaleX(1);}
  60%,100%{opacity:0;transform:scaleX(1);}
}

@keyframes airWingCrosshairVertical{
  0%,45%{opacity:0;transform:scaleY(0);}
  49%,56%{opacity:.84;transform:scaleY(1);}
  60%,100%{opacity:0;transform:scaleY(1);}
}

@keyframes airWingCrosshairCenter{
  0%,47%{opacity:0;transform:scale(.45);}
  50%,56%{opacity:.96;transform:scale(1);}
  60%,100%{opacity:0;transform:scale(1.16);}
}

@keyframes airWingPatternLockedLabel{
  0%,45%{opacity:0;transform:translate3d(0,-5px,0);filter:blur(.7px);}
  49%,56%{opacity:.94;transform:translate3d(0,0,0);filter:blur(0);}
  60%,100%{opacity:0;transform:translate3d(-4px,3px,0);filter:blur(.4px);}
}

@keyframes airPlateConnectedStretch{
  0%,8%{opacity:1;transform:scaleX(1);filter:brightness(1) saturate(1);}
  20%{opacity:1;transform:scaleX(1.06);filter:brightness(1.035) saturate(1.02);}
  31%{opacity:.14;transform:scaleX(1.1);filter:brightness(1.055) saturate(1.025);}
  39%,88%{opacity:0;transform:scaleX(1.1);filter:brightness(1) saturate(1);}
  93%{opacity:.2;transform:scaleX(1);filter:brightness(1) saturate(1);}
  100%{opacity:1;transform:scaleX(1);filter:brightness(1) saturate(1);}
}

@keyframes airPlateCleanStretch{
  0%,16%{opacity:0;transform:scaleX(1);filter:brightness(1);}
  25%{opacity:.58;transform:scaleX(1.01);filter:brightness(1.02);}
  38%{opacity:1;transform:scaleX(1.07);filter:brightness(1.04);}
  50%{opacity:.18;transform:scaleX(1.1);filter:brightness(1.055);}
  59%,100%{opacity:0;transform:scaleX(1.1);filter:brightness(1);}
}

@keyframes airPlateDetachedStretch{
  0%,43%{opacity:0;transform:scaleX(1);filter:brightness(1) saturate(1);}
  53%{opacity:.62;transform:scaleX(1.01);filter:brightness(1.025) saturate(1.01);}
  68%{opacity:1;transform:scaleX(1.08);filter:brightness(1.045) saturate(1.02);}
  81%{opacity:.72;transform:scaleX(1.12);filter:brightness(1.06) saturate(1.025);}
  92%{opacity:.1;transform:scaleX(1.14);filter:brightness(1.025) saturate(1.01);}
  100%{opacity:0;transform:scaleX(1);filter:brightness(1) saturate(1);}
}

@keyframes airOutrageBow{
  0%,17%{opacity:0;transform:scaleX(1) scaleY(.94);}
  41%{opacity:.07;transform:scaleX(1.025) scaleY(.98);}
  61%{opacity:.28;transform:scaleX(1.075) scaleY(1.03);}
  76%{opacity:.1;transform:scaleX(1.11) scaleY(1);}
  87%,100%{opacity:0;transform:scaleX(1.14) scaleY(.96);}
}

@keyframes airOriginWordGather{
  0%{opacity:0;filter:blur(1.8px);transform:translate3d(0,7px,0);}
  18%{opacity:.16;filter:blur(1px);transform:translate3d(0,5px,0);}
  62%,100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
}

@keyframes airWingUpperGhost{
  0%,8%{opacity:0;transform:translate3d(0,0,0) scale(1);}
  25%{opacity:.16;transform:translate3d(.08%,-.12%,0) scale(1.002);}
  47%{opacity:.32;transform:translate3d(.16%,-.22%,0) scale(1.004);}
  70%{opacity:.18;transform:translate3d(.1%,-.14%,0) scale(1.002);}
  91%,100%{opacity:0;transform:translate3d(0,-.08%,0) scale(1);}
}

@keyframes airWingLowerGhost{
  0%,11%{opacity:0;transform:translate3d(0,0,0) scale(1);}
  31%{opacity:.14;transform:translate3d(.06%,.12%,0) scale(1.001);}
  55%{opacity:.28;transform:translate3d(.12%,.22%,0) scale(1.003);}
  77%{opacity:.16;transform:translate3d(.08%,.15%,0) scale(1.002);}
  93%,100%{opacity:0;transform:translate3d(0,.08%,0) scale(1);}
}

@keyframes airFrontPush{
  0%,8%{opacity:0;transform:scaleX(1);}
  20%{opacity:.34;transform:scaleX(1.015);}
  32%{opacity:.66;transform:scaleX(1.055);}
  43%{opacity:.12;transform:scaleX(1.08);}
  50%,100%{opacity:0;transform:scaleX(1.09);}
}

@keyframes airTailPull{
  0%,47%{opacity:0;transform:scaleX(1);}
  59%{opacity:.08;transform:scaleX(1.01);}
  71%{opacity:.23;transform:scaleX(1.035);}
  82%{opacity:.07;transform:scaleX(1.055);}
  90%,100%{opacity:0;transform:scaleX(1.065);}
}

@keyframes airTailVeil{
  0%,51%{opacity:.76;}
  60%,100%{opacity:0;}
}

#p2 .vision-whale-close-up-slide{
  isolation:isolate;
}

#p2 .vision-whale-scene{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  overflow:hidden;
  transform-origin:50% 48%;
  will-change:transform;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-scene{
  animation:whaleSceneSettle 7.8s cubic-bezier(.34,.02,.18,1) both;
}

#p2 .vision-whale-photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

/* VIEW 03 — quiet navigation lights on the pod's central silver spine. */
#p2 .vision-whale-attenborough-slide{
  isolation:isolate;
}

#p2 .vision-whale-attenborough-scene{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  transform-origin:12% 40%;
  will-change:transform;
}

#p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-attenborough-scene{
  animation:whaleCabinBreathe 20s ease-in-out infinite;
}

#p2 .vision-whale-attenborough-slide .vision-whale-attenborough-image{
  z-index:1;
}

#p2 .vision-whale-cabin-water-veil{
  position:absolute;
  inset:-8%;
  z-index:2;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode:soft-light;
  background:#031a35 url("vision-sea-origin.jpg") 50% 72% / 118% 118% no-repeat;
  filter:saturate(.82) brightness(.88) blur(.5px);
  transform:translate3d(3.2%,0,0) scale(1.02);
  will-change:opacity,transform;
}

#p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-cabin-water-veil{
  animation:whaleCabinWaterDrift 12.8s ease-in-out infinite;
}

@keyframes whaleCabinWaterDrift{
  0%{opacity:.02;transform:translate3d(4%,0,0) scale(1.035);}
  14%{opacity:.2;transform:translate3d(2.4%,-.08%,0) scale(1.048);}
  28%{opacity:.025;transform:translate3d(.4%,.03%,0) scale(1.062);}
  43%{opacity:.24;transform:translate3d(-2.2%,-.1%,0) scale(1.078);}
  57%{opacity:.03;transform:translate3d(-4%,.04%,0) scale(1.09);}
  72%{opacity:.18;transform:translate3d(-1.4%,-.06%,0) scale(1.074);}
  86%{opacity:.025;transform:translate3d(2.1%,.02%,0) scale(1.054);}
  100%{opacity:.02;transform:translate3d(4%,0,0) scale(1.035);}
}

#p2 .vision-whale-attenborough-copy{
  position:absolute;
  z-index:8;
  left:20px;
  right:20px;
  bottom:27px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  pointer-events:none;
  color:rgba(255,255,255,.94);
  text-align:left;
  text-shadow:0 2px 14px rgba(2,19,38,.94);
}

#p2 .vision-whale-attenborough-title{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(34px,2.75vw,44px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.015em;
}

body:not(.verticale-edition) #p2 .vision-whale-attenborough-copy{
  inset:0;
  display:block;
  text-align:left;
}

body:not(.verticale-edition) #p2 .vision-whale-attenborough-title{
  position:absolute;
  left:32px;
  bottom:50px;
  font-size:43px;
  text-align:left;
  text-align-last:left;
}

body:not(.verticale-edition) #p2 .vision-whale-attenborough-announcement{
  position:absolute;
  left:32px;
  bottom:18px;
  font-size:calc(clamp(20px,calc(1.3vw + 3px),24px) + 2.67px);
  text-align:left;
  text-align-last:left;
}

#p2 .vision-whale-attenborough-announcement{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:clamp(20px,calc(1.3vw + 3px),24px);
  font-weight:400;
  line-height:1.18;
  letter-spacing:.01em;
  color:rgba(255,255,255,.8);
}

#p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-attenborough-title{
  animation:whaleAttenboroughTitleReveal .72s cubic-bezier(.2,.72,.2,1) .05s both;
}

#p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-attenborough-announcement{
  animation:whaleAttenboroughAnnouncementReveal 2.2s cubic-bezier(.2,.72,.2,1) 2.2s both;
}

@keyframes whaleAttenboroughTitleReveal{
  from{opacity:0;filter:blur(1.5px);transform:translate3d(0,8px,0);}
  to{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
}

@keyframes whaleAttenboroughAnnouncementReveal{
  from{opacity:0;filter:blur(1px);transform:translate3d(0,6px,0);}
  to{opacity:1;filter:blur(0);transform:translate3d(0,0,0);}
}

#p2 .vision-whale-cabin-headlight{
  position:absolute;
  z-index:3;
  left:calc(81.25% + 12px);
  top:calc(30.8% + 11px);
  width:3.4%;
  aspect-ratio:.66 / 1;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse,
    rgba(255,255,244,.98) 0 12%,
    rgba(220,246,255,.96) 25%,
    rgba(153,215,248,.62) 56%,
    rgba(106,193,240,0) 78%);
  box-shadow:0 0 14px 6px rgba(224,249,255,.88),0 0 40px 18px rgba(127,207,248,.48);
}

#p2 .vision-whale-cabin-headlight::after{
  content:"";
  position:absolute;
  left:52%;
  top:50%;
  width:1050%;
  height:370%;
  clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);
  background:linear-gradient(90deg,
    rgba(235,252,255,.9) 0%,
    rgba(188,231,253,.5) 30%,
    rgba(145,211,247,.22) 64%,
    rgba(112,197,240,0) 100%);
  -webkit-mask-image:radial-gradient(ellipse 108% 70% at 0 50%,#000 0 18%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.18) 70%,transparent 100%);
  mask-image:radial-gradient(ellipse 108% 70% at 0 50%,#000 0 18%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.18) 70%,transparent 100%);
  filter:blur(14px);
  transform:translateY(-50%) rotate(10deg);
  transform-origin:0 50%;
}

#p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-cabin-headlight{
  animation:whaleCabinHeadlightWake 6.5s cubic-bezier(.2,.72,.2,1) .9s both;
}

#p2 .vision-whale-cabin-light{
  position:absolute;
  z-index:4;
  left:calc(80.016% - 7px);
  width:3.888%;
  aspect-ratio:.64 / 1;
  border-radius:50%;
  opacity:.16;
  pointer-events:none;
  mix-blend-mode:screen;
  transform:scale(.78);
}

#p2 .vision-whale-cabin-light-orange{
  top:calc(30.734% - 6px);
  background:radial-gradient(ellipse,
    rgba(255,255,232,1) 0 14%,
    rgba(255,178,69,.98) 24% 42%,
    rgba(234,91,15,.78) 53%,
    rgba(234,91,15,0) 76%);
  box-shadow:0 0 5px 1px rgba(255,186,59,.85),0 0 12px 3px rgba(231,83,9,.42);
}

#p2 .vision-whale-cabin-light-green{
  top:calc(30.734% - 6px);
  background:radial-gradient(ellipse,
    rgba(249,255,231,1) 0 14%,
    rgba(157,255,72,.98) 24% 42%,
    rgba(70,177,11,.78) 53%,
    rgba(70,177,11,0) 76%);
  box-shadow:0 0 5px 1px rgba(164,255,74,.84),0 0 12px 3px rgba(71,201,13,.4);
}

#p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-cabin-light-orange{
  animation:whaleCabinOrangePulse 5.6s ease-in-out .65s infinite;
}

#p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-cabin-light-green{
  animation:whaleCabinGreenPulse 5.6s ease-in-out 1.25s infinite;
}

@keyframes whaleCabinOrangePulse{
  0%,12%,18%,61%,67%,100%{opacity:.16;transform:scale(.78);}
  14%{opacity:1;transform:scale(1.15);}
  16%{opacity:.38;transform:scale(.9);}
  63%{opacity:.82;transform:scale(1.04);}
}

@keyframes whaleCabinGreenPulse{
  0%,27%,34%,77%,84%,100%{opacity:.14;transform:scale(.78);}
  29%{opacity:1;transform:scale(1.15);}
  32%{opacity:.4;transform:scale(.9);}
  79%{opacity:.76;transform:scale(1.02);}
}

@keyframes whaleCabinBreathe{
  0%,8%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}

@keyframes whaleCabinHeadlightWake{
  0%,12%{opacity:0;filter:blur(2px) brightness(1);}
  48%{opacity:1;filter:blur(.4px) brightness(1.5);}
  70%,100%{opacity:.92;filter:blur(0) brightness(1.35);}
}

/* VIEW 02 — begin far away, travel inward continuously, meet the close
   photograph, then settle. */
#p2 .vision-whale-close-up-slide::before{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:0;
  background:url("banatti-whale-background-00-photoshop-source.webp") 50% 50% / cover no-repeat;
  filter:blur(10px) saturate(.92) brightness(.88);
  transform:scale(1.04);
  pointer-events:none;
}

#p2 .vision-whale-wide-bridge{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  transform-origin:52% 54%;
}

#p2 .vision-whale-wide-bridge img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  transform-origin:52% 54%;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-wide-bridge{
  animation:whaleWideBridge 7.8s cubic-bezier(.34,.02,.18,1) both;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-wide-bridge img{
  animation:whaleWideBridgeImage 7.8s cubic-bezier(.34,.02,.18,1) both;
}

#p2 .vision-whale-close-up-image{
  z-index:1;
  transform-origin:50% 52%;
  will-change:transform,opacity;
}

#p2 .vision-whale-close-water-veil{
  position:absolute;
  inset:-8%;
  z-index:6;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:soft-light;
  background:#031a35 url("vision-sea-origin.jpg") 50% 72% / 118% 118% no-repeat;
  filter:saturate(.82) brightness(.88) blur(.5px);
  transform:translate3d(2.6%,0,0) scale(1.09);
  will-change:opacity,transform;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-close-water-veil{
  animation:whaleCloseWaterHandoff 7.8s ease-in-out both;
}

/* VIEW 02 — the same light arrives sooner and resolves more fully as the
   camera travels inward. It lives beneath the murky handoff, so it feels born
   in the water rather than laid over the photograph. */
#p2 .vision-whale-close-light-revelation{
  position:absolute;
  inset:-3%;
  z-index:5;
  display:block;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 34% 70% at 56% -10%,rgba(240,255,255,.58) 0,rgba(139,220,255,.24) 42%,transparent 74%),
    linear-gradient(112deg,transparent 30%,rgba(194,242,255,.1) 40%,rgba(247,255,247,.38) 51%,rgba(142,220,255,.14) 61%,transparent 72%),
    radial-gradient(ellipse 59% 24% at 52% 52%,rgba(249,255,246,.44) 0,rgba(132,224,255,.2) 47%,transparent 78%);
  -webkit-mask-image:
    radial-gradient(ellipse 61% 27% at 52% 52%,#000 0 55%,rgba(0,0,0,.72) 70%,transparent 89%),
    linear-gradient(112deg,transparent 25%,#000 41% 60%,transparent 77%);
  mask-image:
    radial-gradient(ellipse 61% 27% at 52% 52%,#000 0 55%,rgba(0,0,0,.72) 70%,transparent 89%),
    linear-gradient(112deg,transparent 25%,#000 41% 60%,transparent 77%);
  filter:blur(.7px) saturate(1.06);
  transform:translate3d(-1.8%,-110px,0) scale(1.015);
  will-change:opacity,transform;
}

#p2 .vision-whale-close-light-revelation::after{
  content:"";
  position:absolute;
  inset:18% 5% 17%;
  opacity:0;
  background:
    radial-gradient(ellipse 19% 4.2% at 16% 44%,rgba(239,255,252,.34),transparent 72%),
    radial-gradient(ellipse 25% 5.2% at 39% 49%,rgba(223,251,255,.28),transparent 74%),
    radial-gradient(ellipse 21% 4.7% at 64% 47%,rgba(241,255,250,.3),transparent 72%),
    radial-gradient(ellipse 15% 4% at 82% 51%,rgba(218,249,255,.22),transparent 72%),
    linear-gradient(102deg,transparent 28%,rgba(240,255,251,.18) 46%,transparent 61%);
  -webkit-mask-image:radial-gradient(ellipse 61% 28% at 52% 51%,#000 0 55%,transparent 89%);
  mask-image:radial-gradient(ellipse 61% 28% at 52% 51%,#000 0 55%,transparent 89%);
  filter:blur(.85px);
  transform:translate3d(-2.2%,-110px,0) scale(1.018);
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-close-light-revelation{
  animation:whaleCloseLightRevelation 8.8s cubic-bezier(.2,.72,.2,1) .3s both;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-close-light-revelation::after{
  animation:whaleCloseCausticCrown 8.8s ease-in-out .3s both;
}

@keyframes whaleCloseLightRevelation{
  0%,12%{opacity:0;transform:translate3d(-1.8%,-110px,0) scale(1.015);}
  31%{opacity:.1;transform:translate3d(-1.15%,-111px,0) scale(1.018);}
  51%{opacity:.29;transform:translate3d(-.45%,-110px,0) scale(1.022);}
  69%{opacity:.48;transform:translate3d(.25%,-109px,0) scale(1.027);}
  83%{opacity:.35;transform:translate3d(.75%,-110px,0) scale(1.024);}
  100%{opacity:.24;transform:translate3d(1.1%,-111px,0) scale(1.022);}
}

@keyframes whaleCloseCausticCrown{
  0%,24%{opacity:0;transform:translate3d(-2.2%,-110px,0) scale(1.018);}
  47%{opacity:.14;transform:translate3d(-.9%,-111px,0) scale(1.024);}
  68%{opacity:.39;transform:translate3d(.35%,-112px,0) scale(1.032);}
  84%{opacity:.22;transform:translate3d(1.25%,-111px,0) scale(1.027);}
  100%{opacity:.13;transform:translate3d(1.9%,-110px,0) scale(1.024);}
}

@keyframes whaleCloseWaterHandoff{
  0%{opacity:.5;transform:translate3d(2.6%,0,0) scale(1.09);}
  18%{opacity:.32;transform:translate3d(1.8%,0,0) scale(1.075);}
  34%{opacity:.22;transform:translate3d(.8%,0,0) scale(1.06);}
  48%{opacity:.12;transform:translate3d(0,0,0) scale(1.05);}
  62%{opacity:.03;transform:translate3d(-.8%,0,0) scale(1.04);}
  72%,100%{opacity:0;transform:translate3d(-1.6%,0,0) scale(1.03);}
}

#p2 .vision-whale-shimmer-lit{
  opacity:0;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-shimmer-base{
  animation:whaleCloseArrival 7.8s cubic-bezier(.34,.02,.18,1) both;
}

/* The close encounter holds as the second and final image in the approach. */
#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-shimmer-lit{
  animation:whaleExposureShimmer 7.2s ease-in-out 2.15s infinite;
  will-change:opacity;
}

#p2 .vision-whale-water-shimmer{
  display:none;
  position:absolute;
  left:-8%;
  right:-8%;
  top:-1%;
  bottom:-15%;
  z-index:3;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  transform-origin:50% 50%;
  scale:1 .3;
  filter:blur(.8px) contrast(1.12);
  -webkit-mask-image:
    radial-gradient(ellipse 50% 16% at 49% 50%,#000 0 54%,transparent 88%),
    radial-gradient(ellipse 28% 10% at 25% 34%,#000 0 56%,transparent 90%),
    radial-gradient(ellipse 9% 13% at 79% 45%,rgba(0,0,0,.86) 0 45%,transparent 88%);
  mask-image:
    radial-gradient(ellipse 50% 16% at 49% 50%,#000 0 54%,transparent 88%),
    radial-gradient(ellipse 28% 10% at 25% 34%,#000 0 56%,transparent 90%),
    radial-gradient(ellipse 9% 13% at 79% 45%,rgba(0,0,0,.86) 0 45%,transparent 88%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  background:
    radial-gradient(ellipse 19% 2.1% at 16% 34%,rgba(239,255,255,.64),transparent 70%),
    radial-gradient(ellipse 28% 2.2% at 43% 46%,rgba(235,254,255,.58),transparent 72%),
    radial-gradient(ellipse 22% 1.8% at 71% 49%,rgba(225,251,255,.52),transparent 72%),
    radial-gradient(ellipse 5% 2% at 79% 44%,rgba(240,255,255,.66),transparent 68%),
    repeating-linear-gradient(103deg,transparent 0 5.6%,rgba(229,253,255,.19) 6.4% 7.15%,transparent 8.25% 13.4%);
  will-change:opacity,transform;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-water-shimmer{
  animation:whaleWaterShimmer 3.45s ease-in-out 8s infinite;
}

#p2 .vision-whale-water-shimmer::before,
#p2 .vision-whale-water-shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  scale:1 .125;
  translate:0 15px;
  opacity:.82;
  background:
    linear-gradient(102deg,transparent 34%,rgba(242,255,255,.52) 46%,transparent 55%),
    repeating-radial-gradient(ellipse at 48% 44%,transparent 0 4.8%,rgba(222,252,255,.20) 5.6% 6.3%,transparent 7.5% 12%);
  transform:translateX(-54%) skewX(-11deg);
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-water-shimmer::before{
  animation:whaleLightPass 3.85s cubic-bezier(.38,0,.18,1) 8.15s infinite;
}

#p2 .vision-whale-water-shimmer::after{
  inset:15% -4% -9%;
  opacity:.52;
  background:linear-gradient(98deg,transparent 39%,rgba(232,254,255,.46) 49%,transparent 58%);
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-water-shimmer::after{
  animation:whaleLightPassSecond 5.45s cubic-bezier(.3,0,.22,1) 10.35s infinite;
}

/* The moving duplicate is cut tightly around the near flipper. Its shoulder is
   the hinge; no part of the belly is included in the moving silhouette. */
#p2 .vision-whale-flipper-motion{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  clip-path:polygon(20.8% 70%,25.8% 69.4%,27.5% 72.8%,24.2% 78%,20.5% 84%,16.4% 91%,12.5% 98.5%,11.4% 100%,5.2% 100%,8.4% 94%,11.8% 88%,15.2% 81%,18.2% 75%);
  transform-origin:25.4% 71.5%;
  will-change:transform;
}

#p2 .vision-whale-flipper-motion img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-flipper-motion{
  animation:whaleFlipperLivingBeat 7.2s ease-in-out 8s infinite;
}

/* Two small continuity lights at the pod's original end points. Their separate,
   offset rhythms keep the pod alive without turning the scene into a light show. */
#p2 .vision-whale-pod-light{
  position:absolute;
  z-index:4;
  width:.72%;
  aspect-ratio:1 / 1;
  border-radius:50%;
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(252,255,255,.98) 0 20%,rgba(184,239,255,.72) 30% 47%,transparent 73%);
  box-shadow:0 0 7px 2px rgba(166,232,255,.34);
  filter:brightness(9) saturate(1.18);
  will-change:opacity,transform;
}

#p2 .vision-whale-pod-light-front{
  left:5.02%;
  top:29.9%;
  background:radial-gradient(circle,rgba(248,255,242,.98) 0 18%,rgba(153,255,86,.9) 27% 47%,rgba(90,223,43,.38) 55%,transparent 74%);
  box-shadow:0 0 8px 2px rgba(139,255,75,.6),0 0 18px 5px rgba(77,214,36,.22);
}

#p2 .vision-whale-pod-light-rear{
  left:48.72%;
  top:37.15%;
  width:.64%;
  background:radial-gradient(circle,rgba(255,250,235,.98) 0 18%,rgba(255,176,75,.92) 27% 47%,rgba(238,103,33,.4) 55%,transparent 74%);
  box-shadow:0 0 8px 2px rgba(255,155,58,.62),0 0 18px 5px rgba(225,83,27,.23);
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-pod-light-front{
  animation:whalePodLightFront 7.8s ease-in-out 8.6s infinite;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-pod-light-rear{
  animation:whalePodLightRear 9.1s ease-in-out 10.2s infinite;
}

/* Local caustic dapples and a soft breath in the existing overhead rays. They
   brighten in place and return to neutral: no travelling band or screen-wide
   swath. */
#p2 .vision-whale-dappled-light,
#p2 .vision-whale-ray-breathe{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  will-change:opacity,transform;
}

#p2 .vision-whale-dappled-light{
  translate:-80px 45px;
  rotate:5deg;
  background:
    radial-gradient(ellipse 10% 3.2% at 7% 39%,rgba(231,254,255,.48),transparent 68%),
    radial-gradient(ellipse 9% 3.8% at 18% 45%,rgba(220,250,255,.42),transparent 69%),
    radial-gradient(ellipse 8% 3.4% at 31% 48%,rgba(237,255,255,.46),transparent 68%),
    radial-gradient(ellipse 10% 4% at 43% 42%,rgba(218,248,255,.38),transparent 70%),
    radial-gradient(ellipse 12% 4.4% at 58% 47%,rgba(235,254,255,.42),transparent 70%),
    radial-gradient(ellipse 10% 4% at 72% 50%,rgba(218,249,255,.34),transparent 70%),
    radial-gradient(ellipse 8% 3.2% at 86% 46%,rgba(235,255,255,.34),transparent 68%),
    radial-gradient(ellipse 18% 7% at 28% 31%,rgba(222,251,255,.24),transparent 73%);
  filter:blur(1.1px) saturate(1.08);
  -webkit-mask-image:linear-gradient(to bottom,transparent 14%,#000 25% 72%,transparent 89%);
  mask-image:linear-gradient(to bottom,transparent 14%,#000 25% 72%,transparent 89%);
}

#p2 .vision-whale-ray-breathe{
  background:
    radial-gradient(ellipse 38% 58% at 92% -8%,rgba(221,251,255,.28),transparent 70%),
    linear-gradient(113deg,transparent 67%,rgba(229,253,255,.14) 76%,transparent 82%),
    linear-gradient(119deg,transparent 72%,rgba(215,248,255,.12) 79%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 49% 74% at 91% 4%,#000 0 44%,transparent 82%);
  mask-image:radial-gradient(ellipse 49% 74% at 91% 4%,#000 0 44%,transparent 82%);
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-dappled-light{
  animation:whaleDappledLightBreathe 8.8s ease-in-out 8.2s infinite;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-ray-breathe{
  animation:whaleRayBreathe 10.6s ease-in-out 8.45s infinite;
}

/* Small caustic pings picked up by the diver's rising bubbles. */
#p2 .vision-whale-bubble-glint{
  position:absolute;
  left:77.74%;
  top:35.6%;
  width:3.52%;
  height:8.8%;
  z-index:4;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(.35px);
  background:
    radial-gradient(circle at 57% 78%,rgba(246,255,255,.96) 0 2%,rgba(193,244,255,.58) 3% 6%,transparent 10%),
    radial-gradient(circle at 46% 57%,rgba(246,255,255,.92) 0 1.8%,rgba(188,241,255,.50) 3% 5.5%,transparent 9%),
    radial-gradient(circle at 63% 35%,rgba(247,255,255,.86) 0 1.5%,rgba(183,238,255,.44) 3% 5%,transparent 8%),
    radial-gradient(circle at 51% 14%,rgba(247,255,255,.76) 0 1.3%,rgba(178,235,255,.38) 3% 4.5%,transparent 7%);
  will-change:opacity,transform;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-bubble-glint{
  animation:whaleBubbleLight 5.2s ease-out 8.35s infinite both;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-bubble-glint-two{
  left:77.25%;
  top:37.1%;
  width:3.2%;
  height:8%;
  animation:whaleBubbleLightDriftTwo 5.6s ease-out 11.5s infinite both;
}

#p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-bubble-glint-three{
  left:78.1%;
  top:38.4%;
  width:3%;
  height:7.5%;
  animation:whaleBubbleLightDriftThree 5.4s ease-out 14.9s infinite both;
}

@keyframes whaleWideBridge{
  0%,54%{opacity:1;}
  76%{opacity:.42;}
  100%{opacity:0;}
}

@keyframes whaleWideBridgeImage{
  0%{transform:scale(1.025);}
  100%{transform:translate3d(-2.4%,2.2%,0) scale(1.31);}
}

@keyframes whaleCloseArrival{
  0%,44%{transform:scale(.965);opacity:0;}
  76%{transform:scale(.988);opacity:.68;}
  100%{transform:scale(1);opacity:1;}
}

@keyframes whaleExposureShimmer{
  0%,100%{opacity:.02;}
  16%{opacity:.07;}
  37%{opacity:.38;}
  52%{opacity:.49;}
  68%{opacity:.18;}
  83%{opacity:.42;}
}

@keyframes whaleSceneSettle{
  0%,44%{transform:translate3d(0,0,0) scale(1);}
  76%{transform:translate3d(0,0,0) scale(1.012);}
  100%{transform:translate3d(0,0,0) scale(1.025);}
}

@keyframes whaleWaterShimmer{
  0%,100%{opacity:.14;transform:translate3d(-1.5%,.35%,0) scale(1);}
  13%{opacity:.44;transform:translate3d(-.7%,-.18%,0) scale(1.012);}
  29%{opacity:.21;transform:translate3d(.1%,.08%,0) scale(1.004);}
  41%{opacity:.55;transform:translate3d(.8%,-.34%,0) scale(1.015);}
  58%{opacity:.18;transform:translate3d(1.45%,.14%,0) scale(1.006);}
  72%{opacity:.48;transform:translate3d(.55%,-.22%,0) scale(1.013);}
  89%{opacity:.24;transform:translate3d(-.45%,.04%,0) scale(1.005);}
}

@keyframes whaleLightPass{
  0%,12%{transform:translateX(-58%) skewX(-11deg);opacity:0;}
  23%{opacity:.78;}
  39%{opacity:.34;}
  53%{opacity:.69;}
  70%,100%{transform:translateX(58%) skewX(-11deg);opacity:0;}
}

@keyframes whaleLightPassSecond{
  0%,31%{transform:translateX(-62%) skewX(-7deg);opacity:0;}
  43%{opacity:.58;}
  56%{opacity:.22;}
  68%{opacity:.49;}
  84%,100%{transform:translateX(62%) skewX(-7deg);opacity:0;}
}

@keyframes whaleFlipperLivingBeat{
  0%,100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg);}
  30%{opacity:1;transform:translate3d(0,0,0) rotate(-5deg);}
  58%{opacity:1;transform:translate3d(0,0,0) rotate(5deg);}
  82%{opacity:1;transform:translate3d(0,0,0) rotate(-1.2deg);}
}

@keyframes whalePodLightFront{
  0%,18%,25%,63%,69%,100%{opacity:.18;transform:scale(.82);}
  20%{opacity:.82;transform:scale(1.1);}
  22%{opacity:.32;transform:scale(.9);}
  65%{opacity:.68;transform:scale(1.02);}
}

@keyframes whalePodLightRear{
  0%,31%,38%,76%,83%,100%{opacity:.16;transform:scale(.8);}
  33%{opacity:.72;transform:scale(1.08);}
  36%{opacity:.27;transform:scale(.9);}
  78%{opacity:.62;transform:scale(1);}
}

@keyframes whaleDappledLightBreathe{
  0%,12%{opacity:0;transform:translateX(-8px) scale(1);}
  32%{opacity:.36;transform:translateX(-3px) scale(1.003);}
  48%{opacity:.7;transform:translateX(4px) scale(1.008);}
  58%{opacity:.98;transform:translateX(10px) scale(1.014);}
  68%{opacity:.62;transform:translateX(15px) scale(1.009);}
  82%{opacity:.18;transform:translateX(20px) scale(1.003);}
  100%{opacity:0;transform:translateX(24px) scale(1);}
}

@keyframes whaleRayBreathe{
  0%,10%,100%{opacity:.08;transform:scale(1);}
  42%{opacity:.54;transform:scale(1.008);}
  63%{opacity:.32;transform:scale(1.004);}
  84%{opacity:.1;transform:scale(1);}
}

@keyframes whaleBubbleLight{
  0%{opacity:0;transform:translate3d(5%,18%,0) scale(.78);}
  14%{opacity:.58;transform:translate3d(-8%,-5%,0) scale(.9);}
  32%{opacity:.58;transform:translate3d(9%,-40%,0) scale(.88);}
  51%{opacity:.58;transform:translate3d(-5%,-78%,0) scale(.84);}
  72%{opacity:.58;transform:translate3d(8%,-112%,0) scale(.8);}
  88%{opacity:.46;transform:translate3d(-2%,-142%,0) scale(.74);}
  100%{opacity:0;transform:translate3d(4%,-162%,0) scale(.68);}
}

@keyframes whaleBubbleLightDriftTwo{
  0%{opacity:0;transform:translate3d(-6%,15%,0) scale(.76);}
  18%{opacity:.52;transform:translate3d(7%,0,0) scale(.88);}
  38%{opacity:.52;transform:translate3d(-10%,-43%,0) scale(.85);}
  58%{opacity:.52;transform:translate3d(6%,-83%,0) scale(.81);}
  80%{opacity:.43;transform:translate3d(-7%,-125%,0) scale(.75);}
  100%{opacity:0;transform:translate3d(5%,-165%,0) scale(.67);}
}

@keyframes whaleBubbleLightDriftThree{
  0%{opacity:0;transform:translate3d(3%,22%,0) scale(.74);}
  16%{opacity:.47;transform:translate3d(-5%,-6%,0) scale(.86);}
  34%{opacity:.47;transform:translate3d(11%,-35%,0) scale(.83);}
  54%{opacity:.47;transform:translate3d(-3%,-73%,0) scale(.79);}
  76%{opacity:.39;transform:translate3d(7%,-116%,0) scale(.73);}
  100%{opacity:0;transform:translate3d(-4%,-160%,0) scale(.65);}
}

/* The supplied close-up carries a tiny four-point generator mark in otherwise
   uninterrupted water. This local water patch removes only that mark while
   preserving the supplied picture itself pixel-for-pixel. */
#p2 .vision-whale-icon-cleanup{
  position:absolute;
  z-index:2;
  right:2.2%;
  bottom:3.2%;
  width:4.2%;
  aspect-ratio:1 / 1;
  border-radius:50%;
  background:rgba(14,66,102,.52);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 0 12px 7px rgba(15,69,105,.35);
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain::before,
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain::after,
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-curtain-hem{
    animation:none;
    opacity:0;
  }
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain{
    transform:none;
    animation:airOriginCurtainFadeReduced 3.9s ease both;
  }
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-prologue{
    animation:airOriginPrologueReduced 3.9s ease both;
  }
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain::before,
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-curtain::after{
    animation:none;
    opacity:0;
  }
  #p2 .vision-air-current{animation:none !important;transform:translate3d(-6%,0,0) scale(1.15) !important;}
  #p2 .vision-air-analysis{display:none;}
  #p2 .vision-air-wing-pattern-lock{display:none;}
  #p2 .vision-air-detached-wing{display:none;}
  #p2 .vision-air-outrage{display:none;}
  #p2 .vision-air-tail-veil{display:none;}
  #p2 .vision-air-isolated-wing,
  #p2 .vision-air-wing-ghost,
  #p2 .vision-air-line-surge,
  #p2 .vision-air-flow-band{display:none;}
  #p2 .vision-air-origin-slide.is-sequencing .vision-air-origin-image--flow{animation:none;opacity:1;transform:none;}
  #p2 .vision-bonneville-wide-slide:not(.is-hidden) .vision-bonneville-wide-image{
    animation:none;
    transform:translate3d(calc(-50% - 150px),-50%,0);
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-origin-sheet{
    -webkit-mask-image:none;
    mask-image:none;
    animation:landHorizonOpenReduced 5.4s ease both;
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-origin-curtain{
    animation:landHorizonCurtain 5.4s linear both;
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-land-origin-prologue{
    animation:landOriginPrologueReduced 5.4s ease both;
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-title-land{
    animation:landStoryTitleReveal .55s ease 2.65s both;
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-title-man{
    animation:landStoryTitleReveal .55s ease 2.95s both;
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-title-speed{
    animation:landStoryTitleReveal .55s ease 3.25s both;
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-tagline{
    animation:landStoryTitleReveal .7s ease 3.75s both;
  }
  #p2 .vision-bonneville-wide-slide[data-element-origin="land"].is-sequencing .vision-bonneville-course{
    animation:none;
  }
  #p2 .vision-water-origin-lit{animation:none;opacity:0;}
  #p2 .vision-whale-photo{transform:none;}
  #p2 .vision-whale-wide-bridge{display:none;}
  #p2 .vision-whale-close-up-slide .vision-whale-scene{animation:none;transform:translate3d(0,0,0) scale(1.025);}
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-close-up-image{animation:none;}
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-flipper-motion,
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-pod-light,
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-dappled-light,
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-ray-breathe,
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-bubble-glint,
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-water-shimmer,
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-water-shimmer::before,
  #p2 .vision-whale-close-up-slide:not(.is-hidden) .vision-whale-water-shimmer::after{animation:none;opacity:0;}
  #p2 .vision-whale-light-revelation,
  #p2 .vision-whale-light-revelation::after,
  #p2 .vision-whale-close-light-revelation,
  #p2 .vision-whale-close-light-revelation::after{animation:none;opacity:.21;transform:translate3d(0,-110px,0);}
  #p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-attenborough-scene{animation:none;transform:none;}
  #p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-cabin-headlight{animation:none;opacity:.58;filter:none;}
  #p2 .vision-whale-attenborough-slide:not(.is-hidden) .vision-whale-cabin-light{animation:none;opacity:.68;transform:scale(1);}
}

@keyframes airOriginCurtainFadeReduced{
  0%,36%{opacity:1;}
  72%,100%{opacity:0;}
}

@keyframes airOriginPrologueReduced{
  0%{opacity:0;filter:none;}
  3%,38%{opacity:1;filter:none;}
  62%,100%{opacity:0;filter:none;}
}

/* ELEMENT ORIGIN GRAMMAR — WATER
   A black field gives the first thought room to be read. The whale world then
   arrives through a soft iris, ready to be repeated for the later elements. */
@property --water-iris-open{
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

@property --water-iris-soft{
  syntax:"<percentage>";
  inherits:false;
  initial-value:.1%;
}

@property --water-iris-edge{
  syntax:"<percentage>";
  inherits:false;
  initial-value:.25%;
}

@property --water-iris-y{
  syntax:"<percentage>";
  inherits:false;
  initial-value:52%;
}

@property --whale-bloom-core{
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

@property --whale-bloom-soft{
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

@property --whale-bloom-edge{
  syntax:"<percentage>";
  inherits:false;
  initial-value:0%;
}

#p2 .vision-water-origin-slide[data-element-origin="water"]{
  isolation:isolate;
  background:#000;
}

#p2 .vision-water-origin-slide[data-element-origin="water"] .vision-element-origin-sheet{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  --water-iris-open:0%;
  --water-iris-soft:.1%;
  --water-iris-edge:.25%;
  --water-iris-y:52%;
  background:radial-gradient(circle closest-side at 52% var(--water-iris-y),
    transparent 0 var(--water-iris-open),
    rgba(0,0,0,.28) var(--water-iris-soft),
    rgba(0,0,0,.88) var(--water-iris-edge),
    #000 calc(var(--water-iris-edge) + 1%));
  pointer-events:none;
  will-change:opacity;
}

#p2 .vision-water-origin-slide[data-element-origin="water"] .vision-water-only-scene{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  overflow:hidden;
  opacity:1;
  transform:scale(1.03);
  transform-origin:52% 48%;
  will-change:transform;
}

#p2 .vision-water-origin-slide[data-element-origin="water"] .vision-water-only-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 44%;
  filter:saturate(.95) brightness(.9);
}

#p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-water-only-scene{
  animation:waterElementOnlySettle 7.4s linear both;
}

#p2 .vision-water-origin-slide[data-element-origin="water"] .vision-water-origin-scene{
  z-index:3;
  opacity:0;
  --whale-bloom-core:0%;
  --whale-bloom-soft:0%;
  --whale-bloom-edge:0%;
  transform:scale(1.055);
  transform-origin:52% 48%;
  clip-path:none;
  -webkit-mask-image:radial-gradient(ellipse at 52% 58%,
    #000 0 var(--whale-bloom-core),
    rgba(0,0,0,.76) var(--whale-bloom-soft),
    transparent var(--whale-bloom-edge));
  mask-image:radial-gradient(ellipse at 52% 58%,
    #000 0 var(--whale-bloom-core),
    rgba(0,0,0,.76) var(--whale-bloom-soft),
    transparent var(--whale-bloom-edge));
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  filter:blur(0) saturate(.94) brightness(.96);
  will-change:opacity,transform,filter;
}

#p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-water-origin-scene{
  animation:waterElementWhaleArrive 7.4s cubic-bezier(.2,.72,.2,1) both;
}

#p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-element-origin-sheet{
  animation:waterElementIrisVeil 5.18s linear both;
}

#p2 .vision-water-origin-slide[data-element-origin="water"] .vision-element-origin-prologue{
  position:absolute;
  z-index:12;
  top:auto;
  left:32px;
  right:32px;
  bottom:84px;
  display:block;
  width:auto;
  color:#fff;
  font-family:'Archivo Black',sans-serif;
  font-size:48px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  text-align:left;
  text-align-last:left;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 18px rgba(0,0,0,.24);
  opacity:0;
  filter:blur(2px);
  transform:none;
  transform-origin:left bottom;
  pointer-events:none;
  will-change:opacity,filter;
}

#p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-element-origin-prologue{
  animation:waterElementPrologue 7.4s cubic-bezier(.2,.72,.2,1) both;
}

#p2 .vision-water-origin-slide[data-element-origin="water"] .vision-whale-story-title{
  z-index:11;
  left:32px;
  right:32px;
  bottom:84px;
  font-size:40px;
}

#p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-whale-story-title{
  animation:whaleStoryTitleReveal 1.8s cubic-bezier(.2,.72,.2,1) 3.55s both;
}

#p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-water-origin-lit{
  animation:whaleOriginBreathingShimmer 5.8s ease-in-out 5.9s infinite;
}

@keyframes waterElementPrologue{
  0%{opacity:0;filter:blur(1px);}
  2%,39%{opacity:1;filter:blur(0);}
  47%,100%{opacity:0;filter:blur(2px);}
}

@keyframes waterElementOnlySettle{
  0%,5%{transform:scale(1.03);}
  100%{transform:scale(1.01);}
}

@keyframes waterElementWhaleArrive{
  0%,42%{
    opacity:0;
    --whale-bloom-core:0%;
    --whale-bloom-soft:0%;
    --whale-bloom-edge:0%;
    transform:scale(1.055);
    filter:blur(0) saturate(.94) brightness(.96);
  }
  48%{
    opacity:.16;
    --whale-bloom-core:6%;
    --whale-bloom-soft:14%;
    --whale-bloom-edge:28%;
    transform:scale(1.051);
    filter:blur(0) saturate(.95) brightness(.97);
  }
  60%{
    opacity:.4;
    --whale-bloom-core:18%;
    --whale-bloom-soft:38%;
    --whale-bloom-edge:66%;
    transform:scale(1.041);
    filter:blur(1.2px) saturate(.97) brightness(.98);
  }
  74%{
    opacity:.78;
    --whale-bloom-core:42%;
    --whale-bloom-soft:68%;
    --whale-bloom-edge:104%;
    transform:scale(1.031);
    filter:blur(2.4px) saturate(.99) brightness(.995);
  }
  90%,100%{
    opacity:1;
    --whale-bloom-core:86%;
    --whale-bloom-soft:106%;
    --whale-bloom-edge:130%;
    transform:scale(1.025);
    filter:blur(0) saturate(1) brightness(1);
  }
}

@keyframes waterElementIrisVeil{
  0%,5%{
    opacity:1;
    --water-iris-open:0%;
    --water-iris-soft:.1%;
    --water-iris-edge:.25%;
    --water-iris-y:52%;
  }
  12%{
    opacity:1;
    --water-iris-open:7%;
    --water-iris-soft:7.7%;
    --water-iris-edge:9.4%;
    --water-iris-y:51%;
  }
  25%{
    opacity:1;
    --water-iris-open:21%;
    --water-iris-soft:22%;
    --water-iris-edge:25%;
    --water-iris-y:49%;
  }
  38%{
    opacity:.96;
    --water-iris-open:36%;
    --water-iris-soft:37%;
    --water-iris-edge:40%;
    --water-iris-y:46%;
  }
  50%{
    opacity:.88;
    --water-iris-open:48%;
    --water-iris-soft:50%;
    --water-iris-edge:54%;
    --water-iris-y:43%;
  }
  62%{
    opacity:.7;
    --water-iris-open:56%;
    --water-iris-soft:68%;
    --water-iris-edge:92%;
    --water-iris-y:38%;
  }
  74%{
    opacity:.32;
    --water-iris-open:68%;
    --water-iris-soft:96%;
    --water-iris-edge:136%;
    --water-iris-y:30%;
  }
  86%{
    opacity:.06;
    --water-iris-open:79%;
    --water-iris-soft:116%;
    --water-iris-edge:160%;
    --water-iris-y:24%;
  }
  92%,100%{
    opacity:0;
    --water-iris-open:86%;
    --water-iris-soft:128%;
    --water-iris-edge:176%;
    --water-iris-y:20%;
  }
}

@keyframes waterElementPrologueReduced{
  0%{opacity:0;filter:none;transform:none;}
  3%,32%{opacity:1;filter:none;transform:none;}
  44%,100%{opacity:0;filter:none;transform:none;}
}

@keyframes waterElementRevealReduced{
  0%,50%{opacity:0;transform:scale(1.025);}
  72%,100%{opacity:1;transform:scale(1.025);}
}

@keyframes waterElementWhaleArriveReduced{
  0%,45%{opacity:0;transform:scale(1.025);}
  62%{opacity:.35;transform:scale(1.025);}
  100%{opacity:1;transform:scale(1.025);}
}

@keyframes waterElementVeilReduced{
  0%,8%{opacity:1;}
  42%,100%{opacity:0;}
}

@media(prefers-reduced-motion:reduce){
  #p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-element-origin-prologue{
    animation:waterElementPrologueReduced 5.4s ease both;
  }

  #p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-water-origin-scene{
    clip-path:none;
    -webkit-mask-image:none;
    mask-image:none;
    opacity:0;
    transform:scale(1.025);
    filter:none;
    animation:waterElementWhaleArriveReduced 5.4s ease both;
  }

  #p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-water-only-scene{
    opacity:1;
    transform:scale(1.01);
    animation:none;
  }

  #p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-element-origin-sheet{
    background:#000;
    animation:waterElementVeilReduced 5.4s ease both;
  }

  #p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-whale-story-title{
    animation:whaleStoryTitleReveal 1.2s ease 2.6s both;
  }

  #p2 .vision-water-origin-slide[data-element-origin="water"].is-sequencing .vision-water-origin-lit{
    animation:none;
    opacity:0;
  }
}