/* ==========================================================================
   Tropical island hero  (pure SVG + CSS, no JavaScript needed)
   Usage:  <section class="island-hero"> {% include "partials/hero.html" %}
             <div class="island-hero__content"> ... </div> </section>
   Theme:  override any --hero-* variable. The dark palette is bound to
           AdiDoks' dark mode (body.dark, set by static/js/main.js from
           localStorage / prefers-color-scheme), so the hero always
           matches the site chrome.
   ========================================================================== */

:root {
  --hero-sky-top: #3f93d6;   --hero-sky-bottom: #ffe1b0;
  --hero-sun: #fff3c4;       --hero-sun-glow: #ffd27a;
  --hero-cloud: #ffffff;     --hero-cloud-opacity: .85;
  --hero-sea-top: #2bb3c0;   --hero-sea-bottom: #0a5f86;
  --hero-wave-1: #35b9c4;    --hero-wave-2: #1f9db5;
  --hero-wave-3: #12809f;    --hero-wave-4: #0a6389;
  --hero-foam: rgba(255,255,255,.55);
  --hero-sand-top: #f6dca0;  --hero-sand-bottom: #dcae6a;
  --hero-grass: #4c9a52;
  --hero-trunk: #8a5a34;     --hero-trunk-ring: #5e3a1f;
  --hero-leaf: #2f9e55;      --hero-leaf-dark: #1d7442;  --hero-vein: #17552f;  --hero-rachis: #86b04a;
  --hero-trunk-light: #bf8c55; --hero-trunk-shade: #4d2e17;
  --hero-coco-top: #9a6a3a;  --hero-coco-bot: #3a2210;
  --hero-hull: #b6402f;      --hero-hull-stripe: #f4e4c1;
  --hero-cabin: #f4e4c1;     --hero-mast: #5a3b22;
  --hero-sail: #fff8e8;      --hero-sail-2: #f3dcb0;  --hero-flag: #f2b632;
  --hero-stars: 0;
  --hero-text: #fff;
}


/* ---------- layout ---------- */
.island-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(380px, 66vh, 780px);
  background: var(--hero-sky-top);
  display: grid;
  align-items: center;
}
.hero-scene { position: absolute; inset: 0; z-index: -1; }
.hero-svg   { display: block; width: 100%; height: 100%; }
.island-hero__content {
  position: relative;
  max-width: 34rem;
  padding: clamp(1.5rem, 5vw, 4rem);
  color: var(--hero-text);
  text-shadow: 0 1px 14px rgba(0, 30, 60, .45);
}

/* ---------- paint ---------- */
.stop-sky-top    { stop-color: var(--hero-sky-top); }
.stop-sky-bottom { stop-color: var(--hero-sky-bottom); }
.stop-sea-top    { stop-color: var(--hero-sea-top); }
.stop-sea-bottom { stop-color: var(--hero-sea-bottom); }
.stop-sand-top   { stop-color: var(--hero-sand-top); }
.stop-sand-bottom{ stop-color: var(--hero-sand-bottom); }
.stop-glow       { stop-color: var(--hero-sun-glow); }

.sun-disc { fill: var(--hero-sun); }
.stars    { opacity: var(--hero-stars); fill: #fff; transition: opacity .6s; }
.cloud    { fill: var(--hero-cloud); opacity: var(--hero-cloud-opacity); }

/* Waves: no outlines. Each layer fades from a lighter crest to its base colour,
   and translucent "swell" layers drift the opposite way to blend the shapes. */
.wave-1 { fill: url(#hero-w1); } .wave-2 { fill: url(#hero-w2); }
.wave-3 { fill: url(#hero-w3); } .wave-4 { fill: url(#hero-w4); }
.wave-swell { opacity: .55; }
.s2 { fill: url(#hero-w2); } .s3 { fill: url(#hero-w3); } .s4 { fill: url(#hero-w4); }
.stop-w1-bot { stop-color: var(--hero-wave-1); } .stop-w2-bot { stop-color: var(--hero-wave-2); }
.stop-w3-bot { stop-color: var(--hero-wave-3); } .stop-w4-bot { stop-color: var(--hero-wave-4); }
.stop-w1-top { stop-color: var(--hero-wave-1); } .stop-w2-top { stop-color: var(--hero-wave-2); }
.stop-w3-top { stop-color: var(--hero-wave-3); } .stop-w4-top { stop-color: var(--hero-wave-4); }
@supports (color: color-mix(in srgb, red, blue)) {
  .stop-w1-top { stop-color: color-mix(in srgb, var(--hero-wave-1), #fff 24%); }
  .stop-w2-top { stop-color: color-mix(in srgb, var(--hero-wave-2), #fff 20%); }
  .stop-w3-top { stop-color: color-mix(in srgb, var(--hero-wave-3), #fff 16%); }
  .stop-w4-top { stop-color: color-mix(in srgb, var(--hero-wave-4), #fff 12%); }
}
.glint  { fill: var(--hero-sun); opacity: .5; }

.sand { fill: url(#hero-sand); }
.grass { fill: var(--hero-grass); }
.trunk { fill: var(--hero-trunk); }
.trunk-light { fill: var(--hero-trunk-light); opacity: .6; }
.trunk-shade { fill: var(--hero-trunk-shade); opacity: .5; }
.trunk-rings { fill: none; stroke: var(--hero-trunk-ring); stroke-width: 1.4; stroke-linecap: round; opacity: .38; }
.stop-coco-top { stop-color: var(--hero-coco-top); }
.stop-coco-bot { stop-color: var(--hero-coco-bot); }
.coco { fill: url(#hero-coco); }
.coco-shine { fill: #fff; opacity: .22; }
.coco-stem { stroke: var(--hero-trunk-shade); stroke-width: 1.6; stroke-linecap: round; }
.leaf-a { fill: var(--hero-leaf); stroke: var(--hero-leaf); stroke-width: 1; stroke-linejoin: round; }
.leaf-b { fill: var(--hero-leaf-dark); stroke: var(--hero-leaf-dark); stroke-width: 1; stroke-linejoin: round; }
#hero-frond .leaf-lower { fill: var(--hero-leaf-dark); stroke: var(--hero-leaf-dark); stroke-width: 1; opacity: .95; }
#hero-frond .vein { fill: none; stroke: var(--hero-rachis); stroke-width: 2.2; stroke-linecap: round; opacity: 1; }

.hull { fill: var(--hero-hull); }
.hull-stripe { fill: none; stroke: var(--hero-hull-stripe); stroke-width: 4; }
.cabin { fill: var(--hero-cabin); }
.mast { stroke: var(--hero-mast); stroke-width: 3; stroke-linecap: round; }
.sail { fill: var(--hero-sail); }
.sail-2 { fill: var(--hero-sail-2); }
.flag { fill: var(--hero-flag); }

/* ---------- motion ---------- */
/* Palm: whole tree leans with the wind, each frond flutters on its own rhythm */
.palm { transform-origin: 1090px 358px; animation: palm-sway 7s ease-in-out infinite; }
.frond { transform-origin: 0 0; animation: frond-flutter 4s ease-in-out infinite; }
.fa { animation-duration: 3.6s; animation-delay: -0.4s; }
.fb { animation-duration: 4.4s; animation-delay: -1.9s; }
.fc { animation-duration: 3.1s; animation-delay: -1.1s; }
.fd { animation-duration: 5s;   animation-delay: -2.7s; }
@keyframes palm-sway     { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(2.4deg); } }
@keyframes frond-flutter { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(4.5deg); } }

/* Waves: each layer slides exactly one wave period, so the loop is seamless */
.wave { animation: wave-drift var(--dur) linear var(--delay) infinite var(--dir); }
.wave-bob { animation: wave-bob 6s ease-in-out var(--bd) infinite alternate; }
@keyframes wave-drift { to { transform: translateX(calc(-1 * var(--p))); } }
@keyframes wave-bob   { from { transform: translateY(-3px); } to { transform: translateY(4px); } }

/* Ship: sails left to right, bobs on the swell, flag flutters */
.ship-travel { animation: ship-sail 70s linear -22s infinite; }
.ship-bob    { transform-origin: 0 12px; animation: ship-bob 4.2s ease-in-out infinite; }
.flag        { transform-origin: 3px -88px; animation: flag-wave .9s ease-in-out infinite alternate; }
@keyframes ship-sail { from { transform: translateX(-180px); } to { transform: translateX(1780px); } }
@keyframes ship-bob  { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(3px) rotate(1.6deg); } }
@keyframes flag-wave { from { transform: scaleX(1) skewY(0deg); } to { transform: scaleX(.8) skewY(8deg); } }

/* Sky: slow clouds, breathing sun, twinkling stars (night) and sea glints */
.cloud { animation: cloud-drift var(--cdur) linear var(--cdelay) infinite; }
@keyframes cloud-drift { from { transform: translateX(-220px); } to { transform: translateX(1820px); } }
.sun-glow { transform-origin: 380px 205px; animation: sun-breathe 8s ease-in-out infinite; }
@keyframes sun-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.star  { animation: twinkle 3.5s ease-in-out var(--sd) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.glint { animation: glint 4s ease-in-out var(--gd) infinite; }
@keyframes glint { 0%, 100% { opacity: .15; transform: scaleX(.7); } 50% { opacity: .6; transform: scaleX(1.1); } }
.glint { transform-box: fill-box; transform-origin: center; }

/* Optional pause button: add class "is-paused" to .hero */
.island-hero.is-paused * { animation-play-state: paused !important; }

/* Respect "reduce motion": freeze everything in a pleasant still frame */
@media (prefers-reduced-motion: reduce) {
  .hero-scene * { animation: none !important; }
  .ship-travel { transform: translateX(520px); }
  .cloud { transform: translateX(var(--rest)); }
}

/* ---------- AdiDoks integration ---------- */
/* Follow AdiDoks' own dark-mode toggle (AdiDoks sets .dark on <body>) */
body.dark {
  --hero-sky-top: #0b1233;   --hero-sky-bottom: #7a3f6e;
  --hero-sun: #f1f3ff;       --hero-sun-glow: #9fb4ff;
  --hero-cloud: #8a78b0;     --hero-cloud-opacity: .45;
  --hero-sea-top: #1c4a78;   --hero-sea-bottom: #050d24;
  --hero-wave-1: #245786;    --hero-wave-2: #1a4470;
  --hero-wave-3: #11335a;    --hero-wave-4: #0a2342;
  --hero-foam: rgba(190,210,255,.35);
  --hero-sand-top: #b79a78;  --hero-sand-bottom: #7c6247;
  --hero-grass: #2c5d3d;
  --hero-trunk: #503420;     --hero-trunk-ring: #2e1c10;
  --hero-leaf: #1f6a49;      --hero-leaf-dark: #124634;  --hero-vein: #0a2e22;  --hero-rachis: #33704a;
  --hero-trunk-light: #7c5836; --hero-trunk-shade: #1f120a;
  --hero-coco-top: #5e3d22;  --hero-coco-bot: #1a0f07;
  --hero-hull: #7a2a26;      --hero-hull-stripe: #c9b58a;
  --hero-cabin: #c9b58a;     --hero-mast: #3a2616;
  --hero-sail: #dcd6ea;      --hero-sail-2: #b9b1d0;  --hero-flag: #e1a93a;
  --hero-stars: .9;
}
.island-hero { align-items: start; }
.island-hero__content {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  /* the fixed navbar floats over the hero: guarantee the content
     clears it on every viewport, whatever the navbar's height */
  padding-top: max(clamp(2rem, 6vw, 4.5rem), 5rem);
}
.island-hero__content h1,
.island-hero__content .lead,
.island-hero__content .meta,
.island-hero__content .meta a,
.island-hero__content .lead a { color: var(--hero-text); }
.island-hero__content .lead a,
.island-hero__content .meta a { text-decoration: underline; text-underline-offset: 2px; }
.island-hero { grid-template-columns: minmax(0, 1fr); }
.island-hero__content { min-width: 0; overflow-wrap: break-word; text-shadow: 0 1px 3px rgba(0, 30, 60, .6), 0 2px 18px rgba(0, 30, 60, .5); }
.island-hero__content h1 { font-size: clamp(1.9rem, 8vw, 3rem); }

/* CTA: a friendly pill with a soft scene shadow and a tiny hover lift.
   Hero-scoped; sitewide buttons keep Bootstrap's default shape.
   The pill is cream (iot-light) with navy text — the same treatment
   dark mode's buttons already use, so the CTA is identical on the
   day and night scenes. */
.island-hero__content .btn {
  border-radius: 50rem;
}
.island-hero__content .btn-primary {
  color: #102542;
  background-color: #eae0cc;
  border-color: #eae0cc;
  text-shadow: none; /* the content block's navy glow would smudge navy text */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}
.island-hero__content .btn-primary:hover,
.island-hero__content .btn-primary:focus {
  color: #102542;
  background-color: #e3d9c2;
  border-color: #e3d9c2;
}
@media (prefers-reduced-motion: no-preference) {
  .island-hero__content .btn-primary {
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  .island-hero__content .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
  }
}

/* Keep the palm in the crop on narrow screens, where a centered slice
   otherwise shows only the sea and the edge of the island. */
@media (max-width: 575px) {
  .hero-svg {
    position: absolute;
    width: 800px;
    max-width: none;
    left: 50%;
    transform: translateX(-75%);
  }
}