/* ============================================
   Daily Coco Trade — Grove (Alt Coming Soon)
   Golden Hour · Agricultural Heritage
   Animated coconut grove · Fullscreen
   ============================================ */

:root {
  /* Brand Palette */
  --forest-deep:   #0F2A1A;
  --forest-rich:   #1F4A2B;
  --forest-leaf:   #2D7A3E;
  --olive:         #4A6B3A;
  --olive-soft:    #6B8A55;

  --coco-young:    #7DC242;
  --coco-young-d:  #5BA82F;

  --coco-shell:    #5C2E10;
  --coco-husk:     #8B4A1F;
  --coco-husk-w:   #A85F2C;
  --coco-husk-l:   #C77B3D;

  --sun:           #E8A93D;
  --sun-warm:      #F0C463;
  --sun-glow:      rgba(232, 169, 61, 0.22);

  --cream:         #F7EFDC;
  --cream-warm:    #F2E8D0;
  --paper:         #EFE3C5;
  --paper-deep:    #E8DCC0;
  --bone:          #FBF5E6;

  /* Functional */
  --bg:            var(--cream);
  --ink:           var(--forest-deep);
  --ink-soft:      var(--coco-shell);
  --ink-mute:      rgba(15, 42, 26, 0.62);
  --ink-faint:     rgba(15, 42, 26, 0.36);
  --line:          rgba(15, 42, 26, 0.16);
  --line-strong:   rgba(15, 42, 26, 0.28);

  /* Type */
  --f-display:     "Cormorant Garamond", "Times New Roman", serif;
  --f-body:        "Manrope", -apple-system, sans-serif;
  --f-script:      "Caveat", cursive;
  --f-sinhala:     "Maname", "Iskoola Pota", "Noto Sans Sinhala", serif;

  /* Motion */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-splash:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--f-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  /* Layered atmosphere: warm sky + golden light + paper warmth */
  background-image:
    radial-gradient(ellipse 60% 50% at 85% 8%, var(--sun-glow), transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(139, 74, 31, 0.10), transparent 70%),
    linear-gradient(180deg, var(--bone) 0%, var(--cream) 40%, var(--cream-warm) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* ============================================
   Atmosphere — Sun, Grain, Mist
   ============================================ */

.sun {
  position: fixed;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(240, 196, 99, 0.45) 0%,
      rgba(232, 169, 61, 0.25) 30%,
      rgba(232, 169, 61, 0.08) 55%,
      transparent 75%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
  animation: sunPulse 8s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0.20 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================
   Horizon — coconut trees at base
   ============================================ */

.horizon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 58vh;
  min-height: 360px;
  max-height: 520px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.tree {
  position: absolute;
  bottom: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: sepia(0.15) saturate(0.82) brightness(0.95);
  transform-origin: 50% 100%;
}

.tree--far-l {
  left: 1%;
  height: 12vh;
  max-height: 90px;
  opacity: 0.38;
  filter: sepia(0.28) saturate(0.5) brightness(0.75) blur(0.3px);
}

.tree--mid-l {
  left: 9%;
  height: 17vh;
  max-height: 140px;
  opacity: 0.55;
  filter: sepia(0.2) saturate(0.65) brightness(0.83);
}

.tree--mid-r {
  right: 9%;
  height: 16vh;
  max-height: 130px;
  opacity: 0.52;
  transform: scaleX(-1);
  filter: sepia(0.22) saturate(0.6) brightness(0.8);
}

.tree--far-r {
  right: 1%;
  height: 11vh;
  max-height: 80px;
  opacity: 0.4;
  transform: scaleX(-1);
  filter: sepia(0.28) saturate(0.48) brightness(0.73) blur(0.3px);
}

@media (max-height: 640px) {
  .horizon { height: 70vh; min-height: 280px; }
  .tree--mid-l, .tree--mid-r { height: 15vh; max-height: 110px; }
  .tree--far-l, .tree--far-r { height: 11vh; max-height: 75px; }
}

/* ============================================
   Frond corner decorations — swaying
   ============================================ */

.frond {
  position: fixed;
  width: 280px;
  height: 380px;
  color: var(--olive);
  opacity: 0.32;
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 100%;
}

.frond--left {
  top: -60px;
  left: -100px;
  transform: rotate(-110deg);
  animation: swayLeft 9s ease-in-out infinite;
}

.frond--right {
  top: -60px;
  right: -100px;
  transform: rotate(110deg) scaleX(-1);
  color: var(--forest-leaf);
  opacity: 0.36;
  animation: swayRight 11s ease-in-out infinite;
}

@keyframes swayLeft {
  0%, 100% { transform: rotate(-110deg); }
  50%      { transform: rotate(-104deg); }
}
@keyframes swayRight {
  0%, 100% { transform: rotate(110deg) scaleX(-1); }
  50%      { transform: rotate(104deg) scaleX(-1); }
}

/* ============================================
   Floating coconuts — drift across screen
   ============================================ */

.coconuts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.coco {
  position: absolute;
  width: 64px;
  height: auto;
  aspect-ratio: 435 / 557;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 14px rgba(63, 99, 47, 0.22));
  user-select: none;
  -webkit-user-drag: none;
}

.coco--1 {
  width: 78px;
  left: 8%;
  animation: drift 26s linear infinite;
  animation-delay: -2s;
}
.coco--2 {
  width: 52px;
  left: 28%;
  animation: drift 32s linear infinite;
  animation-delay: -10s;
}
.coco--3 {
  width: 64px;
  left: 48%;
  animation: drift 28s linear infinite;
  animation-delay: -18s;
}
.coco--4 {
  width: 46px;
  left: 68%;
  animation: drift 36s linear infinite;
  animation-delay: -5s;
}
.coco--5 {
  width: 60px;
  left: 82%;
  animation: drift 30s linear infinite;
  animation-delay: -14s;
}
.coco--6 {
  width: 40px;
  left: 92%;
  animation: drift 34s linear infinite;
  animation-delay: -22s;
}

/* mirror & tilt some for natural variety */
.coco--2 { transform-origin: center; }
.coco--4 { transform-origin: center; }

@keyframes drift {
  0% {
    top: -15vh;
    transform: translateX(0) rotate(-12deg);
    opacity: 0;
  }
  8%   { opacity: 0.65; }
  25%  { transform: translateX(20px) rotate(60deg); }
  50%  { transform: translateX(40px) rotate(180deg); }
  75%  { transform: translateX(10px) rotate(280deg); }
  92%  { opacity: 0.65; }
  100% {
    top: 115vh;
    transform: translateX(-30px) rotate(372deg);
    opacity: 0;
  }
}

/* ============================================
   Drifting motes (pollen / dust)
   ============================================ */

.motes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.motes span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sun);
  opacity: 0;
  filter: blur(0.5px);
  box-shadow: 0 0 6px rgba(232, 169, 61, 0.6);
}
.motes span:nth-child(1)  { left: 12%; animation: rise 14s linear infinite; animation-delay: 0s; }
.motes span:nth-child(2)  { left: 22%; animation: rise 18s linear infinite; animation-delay: -3s; width: 3px; height: 3px; }
.motes span:nth-child(3)  { left: 34%; animation: rise 16s linear infinite; animation-delay: -7s; }
.motes span:nth-child(4)  { left: 46%; animation: rise 20s linear infinite; animation-delay: -2s; width: 2px; height: 2px; }
.motes span:nth-child(5)  { left: 56%; animation: rise 15s linear infinite; animation-delay: -9s; }
.motes span:nth-child(6)  { left: 64%; animation: rise 22s linear infinite; animation-delay: -5s; width: 3px; height: 3px; }
.motes span:nth-child(7)  { left: 74%; animation: rise 17s linear infinite; animation-delay: -12s; }
.motes span:nth-child(8)  { left: 84%; animation: rise 19s linear infinite; animation-delay: -1s; width: 2px; height: 2px; }
.motes span:nth-child(9)  { left: 16%; animation: rise 21s linear infinite; animation-delay: -14s; width: 3px; height: 3px; }
.motes span:nth-child(10) { left: 88%; animation: rise 23s linear infinite; animation-delay: -8s; }

@keyframes rise {
  0%   { bottom: -20px; opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.7; }
  50%  { transform: translateX(30px); }
  90%  { opacity: 0.7; }
  100% { bottom: 110vh; opacity: 0; transform: translateX(-20px); }
}

/* ============================================
   Layout Shell
   ============================================ */

.shell {
  position: relative;
  z-index: 20;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 3vh, 36px) clamp(24px, 5vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  width: 100%;
}

/* ============================================
   Topbar
   ============================================ */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: clamp(14px, 2.4vh, 22px);
  border-bottom: 1px solid var(--line);
  animation: fadeDown 0.9s var(--ease) both;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo {
  height: clamp(40px, 6vh, 56px);
  width: auto;
  display: block;
  transition: opacity 0.3s ease, transform 0.5s var(--ease);
}
.brand:hover .brand__logo { opacity: 0.85; transform: scale(1.02); }

.seal {
  width: clamp(56px, 8vh, 76px);
  height: clamp(56px, 8vh, 76px);
  color: var(--coco-shell);
  opacity: 0.85;
  animation: sealSpin 28s linear infinite;
}
.seal__svg { width: 100%; height: 100%; }
@keyframes sealSpin { to { transform: rotate(360deg); } }

/* ============================================
   Hero — Centered editorial
   ============================================ */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(16px, 3vh, 40px) 0;
  min-height: 0;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-body);
  font-size: clamp(10px, 1.2vh, 12px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coco-shell);
  margin-bottom: clamp(20px, 3.5vh, 38px);
  animation: fadeDown 1s 0.1s var(--ease) both;
}
.eyebrow__line {
  display: inline-block;
  width: clamp(28px, 5vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--coco-husk-w), transparent);
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(46px, min(9vw, 14vh), 128px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--forest-deep);
  margin-bottom: clamp(20px, 3.5vh, 40px);
}

.title__row {
  display: block;
  padding-bottom: 0.08em;
}
.title__row > * { display: inline-block; }
.title__row em {
  font-style: italic;
  font-weight: 300;
  color: var(--coco-husk-w);
  position: relative;
}
.title__row em::before {
  content: "❋";
  position: absolute;
  top: -0.3em;
  left: -1em;
  font-size: 0.35em;
  color: var(--coco-young-d);
  font-style: normal;
  opacity: 0;
  animation: bloom 1.2s 1.4s var(--ease) both;
}
.title__row--2 em::before { content: ""; }
.title__row--4 em::before { content: ""; }

.title__row--1 { animation: rise 1.3s 0.2s var(--ease) both; }
.title__row--2 { animation: rise 1.3s 0.35s var(--ease) both; padding-left: 1.4em; }
.title__row--3 { animation: rise 1.3s 0.5s var(--ease) both; padding-right: 1.6em; }
.title__row--4 { animation: rise 1.3s 0.65s var(--ease) both; padding-left: 0.8em; }

@keyframes rise {
  from { transform: translateY(80%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes bloom {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

.hero__lede {
  max-width: 560px;
  font-size: clamp(13px, 1.6vh, 16px);
  line-height: 1.65;
  color: var(--ink-mute);
  font-weight: 300;
  margin-bottom: clamp(22px, 3.6vh, 40px);
  animation: fadeUp 1s 1s var(--ease) both;
  text-shadow:
    0 0 8px rgba(251, 247, 236, 0.9),
    0 0 16px rgba(251, 247, 236, 0.55);
}

/* CTA cluster */
.hero__cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 1s 1.2s var(--ease) both;
}

.cta-mail {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: transform 0.5s var(--ease);
}
.cta-mail:hover { transform: translateY(-2px); }

.cta-mail__hand {
  font-family: var(--f-script);
  font-size: clamp(16px, 1.9vh, 19px);
  color: var(--coco-husk-w);
  font-weight: 600;
  margin-bottom: -2px;
  transform: rotate(-3deg);
  transform-origin: left;
}

.cta-mail__addr {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.8vh, 19px);
  font-style: italic;
  font-weight: 500;
  color: var(--forest-deep);
  border-bottom: 1px solid var(--coco-husk-w);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.cta-mail:hover .cta-mail__addr {
  color: var(--coco-young-d);
  border-bottom-color: var(--coco-young-d);
}

.cta-phone {
  text-decoration: none;
  font-family: var(--f-display);
  font-size: clamp(15px, 1.8vh, 19px);
  font-style: italic;
  font-weight: 500;
  color: var(--forest-deep);
  border-bottom: 1px solid var(--coco-husk-w);
  padding: 6px 0;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.5s var(--ease);
}
.cta-phone:hover {
  color: var(--coco-young-d);
  border-bottom-color: var(--coco-young-d);
  transform: translateY(-2px);
}

.hero__divider {
  width: 60px;
  height: 12px;
  color: var(--coco-husk-w);
  opacity: 0.5;
}
.hero__divider svg { width: 100%; height: 100%; }

.hero__est {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--coco-shell);
}
.est__script {
  font-family: var(--f-script);
  font-size: clamp(18px, 2.2vh, 22px);
  font-weight: 600;
  transform: rotate(-4deg);
}
.est__year {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vh, 26px);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ============================================
   Footnote
   ============================================ */

.footnote {
  display: block;
  text-align: center;
  padding-top: clamp(14px, 2.4vh, 22px);
  border-top: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: clamp(10px, 1.15vh, 11px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  animation: fadeUp 1s 1.4s var(--ease) both;
  white-space: nowrap;
}

.footnote__sig {
  display: inline-block;
}

/* ============================================
    Bilingual reveal — fading splash effect
   Hover (or focus) swaps EN → Sinhala
   ============================================ */

.lang-reveal {
  position: relative;
  display: inline-grid;
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.lang-reveal > .lang-reveal__en,
.lang-reveal > .lang-reveal__si {
  grid-area: 1 / 1;
  transition:
    opacity 0.7s var(--ease),
    transform 0.8s var(--ease-splash),
    filter 0.55s var(--ease),
    color 0.4s ease;
}

.lang-reveal__en {
  position: relative;
  z-index: 2;
}

.lang-reveal__si {
  font-family: var(--f-sinhala);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--forest-rich);
  opacity: 0;
  transform: scale(0.88);
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
  text-align: inherit;
  white-space: normal;
}

/* The splash — a soft organic glow that blooms behind */
.lang-reveal::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  background:
    radial-gradient(ellipse at 40% 45%,
      rgba(125, 194, 66, 0.30) 0%,
      rgba(232, 169, 61, 0.18) 35%,
      transparent 65%);
  opacity: 0;
  transform: scale(0.55) rotate(-4deg);
  transition: opacity 0.7s var(--ease), transform 1.1s var(--ease-splash);
  z-index: 0;
  border-radius: 60% 40% 55% 45% / 50% 50% 50% 50%;
  pointer-events: none;
  filter: blur(28px);
  will-change: transform, opacity;
}

/* Secondary droplet splash */
.lang-reveal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12%;
  height: 12%;
  min-width: 18px;
  min-height: 18px;
  background: radial-gradient(circle, var(--coco-husk-w), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.5s ease, transform 0.9s var(--ease-splash);
  z-index: 0;
  pointer-events: none;
  filter: blur(8px);
}

/* Reveal trigger states */
.lang-reveal:hover .lang-reveal__en,
.lang-reveal:focus-visible .lang-reveal__en {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(5px);
}

.lang-reveal:hover .lang-reveal__si,
.lang-reveal:focus-visible .lang-reveal__si {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition-delay: 0.12s;
}

.lang-reveal:hover::before,
.lang-reveal:focus-visible::before {
  opacity: 1;
  transform: scale(1.25) rotate(2deg);
}

.lang-reveal:hover::after,
.lang-reveal:focus-visible::after {
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(8);
  transition-duration: 1s, 1.2s;
}

/* Anchor-wrapped reveals: trigger on parent <a> hover/focus too */
a:hover .lang-reveal > .lang-reveal__en,
a:focus-visible .lang-reveal > .lang-reveal__en {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(5px);
}
a:hover .lang-reveal > .lang-reveal__si,
a:focus-visible .lang-reveal > .lang-reveal__si {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition-delay: 0.12s;
}
a:hover .lang-reveal::before,
a:focus-visible .lang-reveal::before {
  opacity: 1;
  transform: scale(1.25) rotate(2deg);
}
a:hover .lang-reveal::after,
a:focus-visible .lang-reveal::after {
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(8);
  transition-duration: 1s, 1.2s;
}

/* --- Per-context Sinhala sizing & styling --- */

/* Eyebrow */
.lang-reveal--eyebrow {
  display: inline-grid;
  vertical-align: middle;
}
.lang-reveal--eyebrow .lang-reveal__si {
  font-size: 1.15em;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--coco-shell);
}

/* Title — bilingual headline */
.lang-reveal--title {
  display: grid;
  width: 100%;
  justify-items: center;
}
.lang-reveal--title .lang-reveal__en,
.lang-reveal--title .lang-reveal__si {
  display: block;
  width: 100%;
}
.lang-reveal--title .lang-reveal__si {
  font-family: var(--f-sinhala);
  font-size: 0.62em;
  line-height: 1.25;
  color: var(--forest-deep);
  letter-spacing: -0.005em;
  align-self: center;
}
.title__si {
  display: block;
  text-align: center;
}
.title__si--1 { color: var(--forest-deep); }
.title__si--2 {
  color: var(--coco-husk-w);
  font-style: normal;
  margin-top: 0.15em;
}

/* When title is hovered, the splash should be larger & more pronounced */
.lang-reveal--title::before {
  inset: -10% -8%;
  filter: blur(40px);
}

/* Body paragraph */
.lang-reveal--block {
  display: grid;
  width: 100%;
}
.lang-reveal--block .lang-reveal__en,
.lang-reveal--block .lang-reveal__si {
  display: block;
}
.lang-reveal--block .lang-reveal__si {
  font-size: 0.95em;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: 0;
}

/* Inline elements (CTA, est, footer link) */
.lang-reveal--inline {
  display: inline-grid;
  vertical-align: baseline;
  justify-items: center;
  align-items: baseline;
}
.lang-reveal--inline .lang-reveal__si { font-size: 1.05em; line-height: 1.2; }

/* CTA hand: Sinhala swap inside the rotated hand wrapper */
.lang-reveal__si--hand {
  font-family: var(--f-sinhala);
  color: var(--coco-husk-w);
  font-weight: 500;
  font-size: 1em;
  line-height: 1.2;
}

/* Est sinhala block — keep on baseline (high specificity to win over .lang-reveal--inline) */
.lang-reveal--inline .lang-reveal__si.est__si {
  font-family: var(--f-sinhala);
  font-size: clamp(16px, 1.95vh, 21px);
  font-weight: 500;
  color: var(--coco-shell);
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  letter-spacing: 0;
  line-height: 1;
}

.est__en {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* Subtle pointer hint */
.lang-reveal { cursor: pointer; }
.lang-reveal:focus-visible {
  outline: 1px dashed var(--coco-husk-w);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

::selection { background: var(--coco-young); color: var(--forest-deep); }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 720px) {
  .seal { display: none; }
  .topbar { gap: 14px; }

  .hero__eyebrow { font-size: 9px; letter-spacing: 0.24em; gap: 10px; }
  .eyebrow__line { width: 20px; }

  .title__row--2 { padding-left: 0.6em; }
  .title__row--3 { padding-right: 0.8em; }
  .title__row--4 { padding-left: 0.4em; }

  .hero__cta { gap: 14px; }
  .hero__divider { display: none; }

  .frond { width: 180px; height: 240px; opacity: 0.22; }
  .sun { width: 320px; height: 320px; top: -80px; right: -80px; }

  .coco--1, .coco--4 { display: none; }

  .footnote__alt { font-size: 9px; }
}

@media (max-height: 640px) {
  .hero__lede { display: none; }
  .hero__title { font-size: clamp(40px, 11vh, 80px); }
  .hero__eyebrow { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .coco, .motes span, .sun, .frond, .seal { animation: none !important; opacity: 0.3 !important; }
}