/* Tunnel hull explainer (inc/tunnel-explainer.php). Loaded only where it
   renders: a tunnel-hull boat page, and any post or page embedding
   [seapro_tunnel_explainer] (see functions.php).

   The real photo of the 250 Bay, zoomed in on the stern, with what's
   below the waterline x-rayed in white line art. data-step on .tx picks the
   state — 1 standard hull, 2 tunnel full of water, 3 motor up, 4 clearance —
   and transitions animate between them. Strokes don't scale with the zoom.
   The bow points right, so water and the bottom stream right to left. */
.tx{ margin:0; }
.tx-stage{ position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#cfd9e2; }
.tx-svg{ display:block; width:100%; height:auto; aspect-ratio:1440/680; transition:opacity .4s; }
.tx-svg path, .tx-svg rect, .tx-svg ellipse{ vector-effect:non-scaling-stroke; }
.tx-chip{ position:absolute; top:16px; left:16px; z-index:1; margin:0; display:inline-grid; padding:7px 13px; border-radius:999px; background:var(--blue-deep); color:#fff; font-family:var(--head); text-transform:uppercase; letter-spacing:.12em; font-size:12px; transition:background .4s; }
.tx-chip > span{ grid-area:1/1; transition:opacity .4s; }
.tx[data-step="1"] .tx-chip{ background:var(--ink-soft); }
.tx[data-step="1"] .tx-chip-tun, .tx:not([data-step="1"]) .tx-chip-std{ opacity:0; }
.tx-replay{ position:absolute; z-index:1; top:14px; right:14px; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--blue-deep); font-family:var(--head); text-transform:uppercase; letter-spacing:.12em; font-size:12px; cursor:pointer; }
.tx-replay[hidden]{ display:none; }

/* X-ray below the waterline, shown once zoomed in */
.tx-xray{ transition:opacity .6s; }
.tx.is-wide .tx-xray{ opacity:0; }
.tx-panel{ fill:url(#tx-panel); }
.tx-sand{ fill:#e9dec4; fill-opacity:.16; }
.tx-sand-edge{ fill:none; stroke:#f3e7c9; stroke-width:1.4; stroke-dasharray:6 5; opacity:.9; }
.tx-grass{ fill:none; stroke:#bfe3a0; stroke-width:1.6; stroke-linecap:round; opacity:.85; }
.tx-oyster ellipse{ fill:none; stroke:#f3e7c9; stroke-width:1.1; opacity:.85; }
.tx-sand-move{ animation:tx-sand 2.6s linear infinite; }
.tx-air{ fill:#fff; fill-opacity:.16; }
.tx-body{ fill:#fff; fill-opacity:.1; }
.tx-line{ fill:none; stroke:#fff; stroke-width:1.8; stroke-linejoin:round; }
.tx-roof{ fill:none; stroke:#7fd1ff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.tx-packed{ fill:#7fd1ff; fill-opacity:.38; }
.tx-ghost-keel{ fill:none; stroke:#fff; stroke-opacity:.75; stroke-width:1.5; stroke-dasharray:6 5; }
.tx-surface{ fill:none; stroke:#7fd1ff; stroke-width:1.6; }
.tx-flow path{ fill:none; stroke:#fff; stroke-opacity:.75; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:22 16; animation:tx-flow 1.1s linear infinite; }
.tx-part{ fill:#fff; fill-opacity:.14; stroke:#fff; stroke-width:1.4; stroke-linejoin:round; }
.tx-av{ fill-opacity:.3; }
.tx-slots{ stroke:#fff; stroke-width:1; opacity:.7; }
.tx-hub{ fill:url(#tx-steel); stroke:#fff; stroke-width:1; }
.tx-ghost{ fill:none; stroke:#fff; stroke-width:1.2; stroke-dasharray:4 4; opacity:0; transition:opacity .5s .2s; }
/* Prop: 2 turns a second. tx-spin scales each blade by cos(angle); the
   front copy shows on the near half of the turn, the back copy on the far
   half; .tx-ph2/.tx-ph3 put the other two blades 120 and 240 degrees on. */
.tx-blade{ stroke:#fff; stroke-width:.9; stroke-linejoin:round; transform-box:view-box; transform-origin:141px 478.5px; }
.tx-blade-f{ fill:url(#tx-steel); fill-opacity:.9; animation:tx-spin .5s linear infinite, tx-near .5s linear infinite; }
.tx-blade-b{ fill:#5d6b78; fill-opacity:.75; animation:tx-spin .5s linear infinite, tx-far .5s linear infinite; }
.tx-ph2{ animation-delay:-.1667s; }
.tx-ph3{ animation-delay:-.3333s; }
.tx-prop-blur{ fill:#fff; opacity:.12; }
/* The lift: a sketched outline of the real motor rises off it, on the
   jack plate (steps 3-4). The photo itself is never altered. */
.tx-outline, .tx-jack{ opacity:0; transition:opacity .5s; }
.tx-o-fill{ fill:#fff; fill-opacity:.16; stroke:#fff; stroke-width:1.8; stroke-linejoin:round; }
.tx-o-line{ fill:none; stroke:#fff; stroke-width:1.4; }
.tx-jack{ fill:#fff; fill-opacity:.12; stroke:#fff; stroke-width:1.4; }
/* Clearance and labels */
.tx-clear{ fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .4s, opacity .4s; }
.tx-clear-bar{ fill:#fff; stroke:none; transform-box:view-box; transform-origin:167px 530px; transform:scaleY(.44); transition:transform 1.4s cubic-bezier(.45,0,.2,1), fill .4s; }
.tx-clear-top{ transform:translateY(24px); transition:transform 1.4s cubic-bezier(.45,0,.2,1); }
.tx-label{ font-family:var(--head); font-weight:600; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; fill:#fff; paint-order:stroke; stroke:#062a52; stroke-width:4px; stroke-linejoin:round; }
.tx-leader{ fill:none; stroke:#fff; stroke-width:1.2; }
.tx-labels > *{ opacity:0; transition:opacity .3s; }

/* 1 -> 2: tunnel-only pieces (.tx-tun) replace standard-hull ones (.tx-std). */
.tx-std{ transition:opacity .5s; }
.tx-tun{ opacity:0; transition:opacity .5s .3s; }
.tx:not([data-step="1"]) .tx-std{ opacity:0; }
.tx:not([data-step="1"]) .tx-tun{ opacity:1; }
/* 3-4: the jack plate raises the motor; the clearance below it grows. */
.tx-motor{ transition:transform 1.4s cubic-bezier(.45,0,.2,1); }
.tx[data-step="3"] .tx-motor, .tx[data-step="4"] .tx-motor{ transform:translateY(-24px); }
.tx[data-step="3"] .tx-ghost, .tx[data-step="4"] .tx-ghost{ opacity:.6; }
.tx[data-step="3"] .tx-outline, .tx[data-step="4"] .tx-outline,
.tx[data-step="3"] .tx-jack, .tx[data-step="4"] .tx-jack{ opacity:1; }
.tx[data-step="3"] .tx-clear-bar, .tx[data-step="4"] .tx-clear-bar, .tx[data-step="3"] .tx-clear-top, .tx[data-step="4"] .tx-clear-top{ transform:none; }
.tx[data-step="4"] .tx-clear{ stroke:var(--gold); }
.tx[data-step="4"] .tx-clear-bar{ fill:var(--gold); }
.tx[data-step="1"] .tx-l-clear, .tx[data-step="4"] .tx-l-clear,
.tx[data-step="2"] .tx-l-tunnel, .tx[data-step="2"] .tx-l-keel, .tx[data-step="2"] .tx-l-water,
.tx[data-step="3"] .tx-l-jack, .tx[data-step="3"] .tx-l-lift, .tx[data-step="3"] .tx-l-water,
.tx[data-step="4"] .tx-l-lift{ opacity:1; transition:opacity .5s .9s; }
/* The whole-boat view is just the photo. */
.tx.is-wide .tx-labels > *, .tx.is-wide .tx-ghost, .tx.is-wide .tx-outline, .tx.is-wide .tx-jack, .tx.is-wide .tx-clear{ opacity:0; transition:opacity .3s; }

@keyframes tx-flow{ to{ stroke-dashoffset:-76; } }
@keyframes tx-sand{ to{ transform:translateX(-240px); } }
/* Blade at angle a: height scales by cos(a); the shear, 38deg x sin(a),
   shows the pitch twist, so a blade turned toward you is seen as its
   slanted face rather than a line. */
@keyframes tx-spin{
  0%, 100%{ transform:skewY(0deg) scaleY(1); }
  12.5%{ transform:skewY(-26.9deg) scaleY(.707); }
  25%{ transform:skewY(-38deg) scaleY(0); }
  37.5%{ transform:skewY(-26.9deg) scaleY(-.707); }
  50%{ transform:skewY(0deg) scaleY(-1); }
  62.5%{ transform:skewY(26.9deg) scaleY(-.707); }
  75%{ transform:skewY(38deg) scaleY(0); }
  87.5%{ transform:skewY(26.9deg) scaleY(.707); }
}
@keyframes tx-near{ 0%, 49.9%{ opacity:1; } 50%, 100%{ opacity:0; } }
@keyframes tx-far{ 0%, 49.9%{ opacity:0; } 50%, 100%{ opacity:1; } }
.tx.is-paused, .tx.is-paused *{ animation-play-state:paused; }
.tx.tx-instant *{ transition:none !important; }
.tx.tx-fade .tx-svg{ opacity:0; }
/* Reduced motion: nothing moves; the prop rests with its blades 120deg apart. */
@media (prefers-reduced-motion: reduce){
  .tx *{ animation:none !important; transition:none !important; }
  .tx-blade-b, .tx-blade-f.tx-ph3{ opacity:0; }
  .tx-blade-b.tx-ph3{ opacity:1; }
  .tx-ph2{ transform:skewY(-33deg) scaleY(-.5); }
  .tx-ph3{ transform:skewY(33deg) scaleY(-.5); }
}

.tx-steps{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tx-steps button{ all:unset; box-sizing:border-box; display:flex; gap:12px; width:100%; height:100%; padding:15px 16px 17px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink-soft); font-size:15px; line-height:1.45; cursor:pointer; transition:border-color .3s, background .3s, color .3s; }
.tx-steps b{ flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--mist); color:var(--blue-deep); font-family:var(--head); font-size:14px; transition:background .3s, color .3s; }
.tx-steps strong{ color:var(--ink); font-weight:600; }
.tx-steps button[aria-current="step"]{ border-color:var(--blue); background:#f5f9fe; color:var(--ink); }
.tx-steps button[aria-current="step"] b{ background:var(--blue); color:#fff; }
.tx-steps button:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:2px; }
/* Notes under the explainer, then the CTAs on their own row. */
.tx-notes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.tx-notes p{ margin:0; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:var(--mist); color:var(--ink-soft); font-size:15px; line-height:1.5; }
.tx-notes b{ display:block; margin-bottom:3px; color:var(--ink); font-weight:600; }
.tx-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
@media (max-width:980px){ .tx-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){
  /* The drawing is small here: chip and Replay sit outside it. */
  .tx-chip{ position:static; margin:10px 10px 0; padding:5px 10px; font-size:10.5px; }
  .tx-replay{ position:static; display:block; margin:0 10px 10px auto; padding:6px 12px; font-size:10.5px; }
  .tx-label, .tx-leader{ display:none; }
  .tx-steps, .tx-notes{ grid-template-columns:1fr; }
  .tx-cta .btn{ flex:1 1 100%; flex-wrap:wrap; justify-content:center; white-space:normal; text-align:center; padding-left:18px; padding-right:18px; }
}