/* ============================================
   COMPONENTS — buttons, logo
   ============================================ */

/* ── LOGO ── */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Hay Bale logo — single SVG, themed via CSS variables.
   Default (light background) uses deep gold + forest green. */
.logo-mark {
  flex-shrink: 0;
  overflow: visible;
  display: block;
  --bale-color:  #C8922A;
  --twine-color: #2D4A2D;
  --leaf-color:  #C8922A;
  --shadow-color: #C8922A;
}

/* Dark-background contexts: brighter gold, lighter twine, amber leaves */
.nav.is-transparent .logo-mark,
.footer .logo-mark,
.trade-map .logo-mark {
  --bale-color:  #E8B84B;
  --twine-color: #FDE4A0;
  --leaf-color:  #E8B84B;
  --shadow-color: #E8B84B;
}

/* Bale box */
.logo-mark .bale-body {
  fill:   var(--bale-color);
  stroke: var(--bale-color);
}
/* Three compression lines */
.logo-mark .bale-line {
  stroke: var(--bale-color);
  fill: none;
}
/* Twine straps */
.logo-mark .twine-left,
.logo-mark .twine-right {
  stroke: var(--twine-color);
  fill: none;
}
/* Sprig stem */
.logo-mark .sprig-stem {
  stroke: var(--twine-color);
  fill: none;
}
/* Leaves */
.logo-mark .leaf-left,
.logo-mark .leaf-right,
.logo-mark .leaf-crown {
  fill: var(--leaf-color);
}
/* Ground shadow */
.logo-mark .ground-shadow {
  stroke: var(--shadow-color);
  fill: none;
}

/* ── ONE-SHOT INTRO ANIMATION (session-gated) ──────────
   Triggered by .logo-mark--animate class added by main.js
   once per sessionStorage. Easing: cubic-bezier(0.16, 1, 0.3, 1)
   = approx. var(--ease-out) expressive. */
.logo-mark--animate .bale-body {
  opacity: 0;
  animation: baleFade .4s cubic-bezier(0.16, 1, 0.3, 1) .05s forwards;
}
.logo-mark--animate .bale-line {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: lineDraw .4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.logo-mark--animate .bale-line:nth-of-type(1) { animation-delay: .40s; }
.logo-mark--animate .bale-line:nth-of-type(2) { animation-delay: .48s; }
.logo-mark--animate .bale-line:nth-of-type(3) { animation-delay: .56s; }

.logo-mark--animate .twine-left,
.logo-mark--animate .twine-right {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: twineDraw .3s cubic-bezier(0.16, 1, 0.3, 1) .72s forwards;
}

.logo-mark--animate .sprig-stem {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: stemDraw .25s cubic-bezier(0.16, 1, 0.3, 1) 1.00s forwards;
}

.logo-mark--animate .leaf-left,
.logo-mark--animate .leaf-right,
.logo-mark--animate .leaf-crown {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: leafPop .32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.logo-mark--animate .leaf-left  { animation-delay: 1.22s; }
.logo-mark--animate .leaf-right { animation-delay: 1.30s; }
.logo-mark--animate .leaf-crown { animation-delay: 1.38s; }

.logo-mark--animate .ground-shadow {
  opacity: 0;
  animation: shadowFade .2s cubic-bezier(0.16, 1, 0.3, 1) 1.50s forwards;
}

@keyframes baleFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineDraw  { to { stroke-dashoffset: 0; } }
@keyframes twineDraw { to { stroke-dashoffset: 0; } }
@keyframes stemDraw  { to { stroke-dashoffset: 0; } }
@keyframes leafPop   {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes shadowFade { to { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .logo-mark--animate .bale-body,
  .logo-mark--animate .bale-line,
  .logo-mark--animate .twine-left,
  .logo-mark--animate .twine-right,
  .logo-mark--animate .sprig-stem,
  .logo-mark--animate .leaf-left,
  .logo-mark--animate .leaf-right,
  .logo-mark--animate .leaf-crown,
  .logo-mark--animate .ground-shadow {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
}

/* ── BUTTONS ── */
.btn {
  --_bg: var(--gold);
  --_fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 2rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--_fg);
  background: var(--_bg);
  border-radius: var(--r-pill);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
  will-change: transform;
}

.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--charcoal);
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease-out);
}
.btn:hover { box-shadow: var(--shadow-gold); }
.btn:hover::before { transform: translateY(0); }

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--white);
  border: 1px solid rgba(255,255,255,0.55);
}
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--charcoal); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-med) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

html[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px) scaleX(-1); }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }

/* Earth-at-Night trade map styles live in layout.css. */

/* ============================================
   PILLAR CARDS (Why Us)
   ============================================ */
.pillar {
  position: relative;
  background: var(--white);
  padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 24px rgba(26,26,26,0.06);
  transition: transform .45s var(--ease-spring),
              box-shadow .45s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.pillar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(26,26,26,0.12);
}
.pillar:hover::before { transform: scaleX(1); }
.pillar__num {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  color: rgba(200,146,42,0.35);
  letter-spacing: 0;
}
.pillar__icon {
  display: inline-flex;
  width: 48px; height: 48px;
  margin-bottom: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(200,146,42,0.08);
  transition: background .4s var(--ease-out);
}
.pillar__icon svg { width: 28px; height: 28px; }
.pillar:hover .pillar__icon { background: rgba(200,146,42,0.18); }
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--charcoal);
  margin-bottom: .75rem;
}
.pillar p {
  font-size: .97rem;
  line-height: 1.7;
  color: rgba(59,47,47,0.78);
}

/* ============================================
   ORIGIN CARDS (Sourcing)
   ============================================ */
.origin {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--espresso);
  color: var(--cream);
  aspect-ratio: 4 / 5;
  min-height: 520px;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-out);
  box-shadow: 0 14px 40px rgba(26,26,26,0.15);
}
.origin__media {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.origin__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.15) 0%, rgba(26,26,26,0.35) 40%, rgba(26,26,26,0.9) 100%);
}
.origin__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 3s var(--ease-out);
}
.origin:hover .origin__media img { transform: scale(1.12); }

.origin__content {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  height: 100%;
  justify-content: flex-end;
}
.origin__flag { font-size: 2rem; margin-bottom: .3rem; }
.origin__kicker {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.origin__tag {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(245,230,200,0.9);
  margin-bottom: .5rem;
}
.origin p {
  font-size: .97rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin-bottom: 1.25rem;
}
.origin__list {
  display: grid;
  gap: .35rem;
  border-top: 1px solid rgba(232,184,75,0.28);
  padding-top: .9rem;
}
.origin__list li {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
}
.origin__list span { color: rgba(255,255,255,0.6); }
.origin__list strong {
  color: var(--white);
  font-weight: 500;
}

/* ============================================
   SPEC CARDS (Products)
   ============================================ */
.spec-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(232,184,75,0.25);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-spring),
              border-color .5s var(--ease-out),
              box-shadow .5s var(--ease-out);
  isolation: isolate;
  overflow: hidden;
}
.spec-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 50% -10%, rgba(232,184,75,0.14), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.spec-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,184,75,0.55);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.spec-card:hover::before { opacity: 1; }
.spec-card__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(232,184,75,0.18);
}
.spec-card__flag { font-size: 2rem; line-height: 1; }
.spec-card__head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--white);
  line-height: 1.1;
}
.spec-card__head span {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: .15rem;
}
.spec-card__table {
  display: grid;
  gap: 0;
  margin-bottom: 1.75rem;
}
.spec-card__table > div {
  display: flex;
  justify-content: space-between;
  padding-block: .7rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: .92rem;
}
.spec-card__table > div:last-child { border-bottom: 0; }
.spec-card__table dt {
  color: rgba(245,230,200,0.65);
  font-weight: 400;
}
.spec-card__table dd {
  color: var(--white);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Outline button (dark bg) */
.btn--outline {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  padding: .85rem 1.65rem;
  font-size: .82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn--outline::before { background: var(--gold); }
.btn--outline:hover {
  color: var(--charcoal);
  box-shadow: var(--shadow-gold);
}

/* Small button variant */
.btn--sm {
  padding: .75rem 1.35rem;
  font-size: .85rem;
}

/* ============================================
   DEST CARDS (GCC)
   ============================================ */
.dest {
  position: relative;
  padding: clamp(2rem, 3vw, 3rem);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(232,184,75,0.22);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .45s var(--ease-spring),
              border-color .45s var(--ease-out),
              background .45s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.dest::after {
  content: '';
  position: absolute; inset: auto -20% -40% auto;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(232,184,75,0.18), transparent 70%);
  border-radius: 50%;
  transition: transform .8s var(--ease-out);
  z-index: -1;
}
.dest:hover {
  transform: translateY(-6px);
  border-color: rgba(232,184,75,0.5);
  background: rgba(255,255,255,0.05);
}
.dest:hover::after { transform: scale(1.3); }
.dest__flag { font-size: 2.4rem; margin-bottom: .5rem; }
.dest h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--white);
  margin-bottom: .25rem;
}
.dest__tag {
  display: block;
  font-size: .78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
}
.dest ul {
  display: grid; gap: .6rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(232,184,75,0.2);
}
.dest li {
  position: relative;
  padding-inline-start: 1.25rem;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
}
.dest li::before {
  content: '';
  position: absolute;
  left: 0; top: .65em;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
html[dir="rtl"] .dest li { padding-inline-start: 0; padding-inline-end: 1.25rem; }
html[dir="rtl"] .dest li::before { left: auto; right: 0; }
.dest strong { color: var(--white); font-weight: 500; }

/* Trust stats (GCC + shared) */
.trust-stats .stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  color: var(--gold-light);
  line-height: 1;
  display: block;
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.trust-stats .stat__label {
  font-size: .78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  display: block;
}
.trust-stats .stat { text-align: center; }

/* reveal stagger via --d */
.reveal[style*="--d"] { transition-delay: var(--d); }

/* ============================================
   JOURNEY — ACT SCENE ELEMENTS
   ============================================ */
/* Act 1 — Origin */
.act--1 .act__hills {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 45%;
  z-index: 1;
}
.act--1 .act__bales {
  position: absolute; left: 12%; bottom: 18%;
  width: 38%; height: 22%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
}
.act--1 .act__bales::before {
  content: '';
  display: block;
  background: linear-gradient(180deg, #D4B370 0%, #A68345 100%);
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  grid-column: span 6; grid-row: span 3;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(0,0,0,0.06) 10px 11px),
    linear-gradient(180deg, #D4B370 0%, #A68345 100%);
  animation: baleBounce 3s var(--ease-in-out) infinite;
}
.act--1 .act__barn {
  position: absolute; right: 8%; bottom: 24%;
  width: 140px; height: auto;
  z-index: 3;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
}
.act--1 .barn-door {
  transform-origin: center;
  animation: doorOpen 2s var(--ease-out) 0.8s forwards;
}
.act--1 .act__flag {
  position: absolute;
  top: 14%; left: 10%;
  width: 70px;
  animation: flagSway 3s var(--ease-in-out) infinite;
  transform-origin: bottom left;
}

@keyframes baleBounce {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-6px); }
  30% { transform: translateY(0); }
}
@keyframes doorOpen {
  to { transform: scaleX(0.2) translateX(-15px); opacity: 0.3; }
}
@keyframes flagSway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* Act 2 — Loading */
.act--2 .act__warehouse {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 50%;
}
.act--2 .act__crane {
  position: absolute; top: 8%; left: 12%;
  width: 280px; height: auto;
  z-index: 2;
}
.act--2 .crane-cable, .act--2 .crane-hook {
  animation: craneSwing 3s var(--ease-in-out) infinite;
  transform-origin: 200px 30px;
}
@keyframes craneSwing {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
.act--2 .act__container {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, 0);
  width: 340px; height: 130px;
  background: linear-gradient(180deg, #D8A53A 0%, #B8822A 100%);
  border: 2px solid #3B2F2F;
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  overflow: hidden;
  z-index: 3;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,0.08) 18px 19px),
    linear-gradient(180deg, #D8A53A 0%, #B8822A 100%);
}
.container-brand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 600;
  color: #3B2F2F;
  letter-spacing: 0.2em;
  font-size: 1.1rem;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
  z-index: 1;
}
.container-doors {
  position: absolute; top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, #8A5E1A 0%, #6E4A12 100%);
  border: 2px solid #3B2F2F;
  z-index: 2;
  transition: transform .5s var(--ease-out);
  animation: doorsClose 4s var(--ease-out) 0.8s forwards;
}
.container-doors--l { left: 0; transform-origin: left center; }
.container-doors--r { right: 0; transform-origin: right center; }
@keyframes doorsClose {
  0%   { transform: perspective(400px) rotateY(-80deg); }
  40%  { transform: perspective(400px) rotateY(-80deg); }
  100% { transform: perspective(400px) rotateY(0); }
}
.container-doors--r { animation-name: doorsCloseR; }
@keyframes doorsCloseR {
  0%   { transform: perspective(400px) rotateY(80deg); }
  40%  { transform: perspective(400px) rotateY(80deg); }
  100% { transform: perspective(400px) rotateY(0); }
}
.act--2 .act__flyers {
  position: absolute; left: 20%; top: 40%;
  width: 30%; height: 30%;
  z-index: 2;
}
.flyer {
  position: absolute;
  width: 32px; height: 20px;
  background: linear-gradient(180deg, #D4B370, #A68345);
  border-radius: 2px;
  animation: flyerArc 3s var(--ease-in-out) infinite;
  animation-delay: var(--delay);
}
@keyframes flyerArc {
  0%   { transform: translate(0, 120px) rotate(0); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(140px, -40px) rotate(180deg); }
  80%  { opacity: 1; }
  100% { transform: translate(280px, 120px) rotate(360deg); opacity: 0; }
}

/* Act 3 — Ocean */
.act--3 { color: var(--white); }
.act--3 .act__ocean {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 55%;
  z-index: 2;
}
.act--3 .act__stars { position: absolute; top: 0; left: 0; width: 100%; height: 45%; z-index: 1; }
.act--3 .act__stars span {
  position: absolute;
  width: 2px; height: 2px;
  background: #F5E6C8;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(245,230,200,0.8);
  animation: twinkle 3s var(--ease-in-out) infinite;
}
.act--3 .act__stars span:nth-child(1)  { top: 10%; left:  8%; animation-delay: 0s; }
.act--3 .act__stars span:nth-child(2)  { top: 15%; left: 20%; animation-delay: .4s; }
.act--3 .act__stars span:nth-child(3)  { top: 8%;  left: 32%; animation-delay: .8s; }
.act--3 .act__stars span:nth-child(4)  { top: 22%; left: 44%; animation-delay: 1.2s; }
.act--3 .act__stars span:nth-child(5)  { top: 12%; left: 56%; animation-delay: 1.6s; }
.act--3 .act__stars span:nth-child(6)  { top: 18%; left: 68%; animation-delay: 2s; }
.act--3 .act__stars span:nth-child(7)  { top: 6%;  left: 80%; animation-delay: .2s; }
.act--3 .act__stars span:nth-child(8)  { top: 25%; left: 92%; animation-delay: .6s; }
.act--3 .act__stars span:nth-child(9)  { top: 30%; left: 14%; animation-delay: 1s; }
.act--3 .act__stars span:nth-child(10) { top: 34%; left: 28%; animation-delay: 1.4s; }
.act--3 .act__stars span:nth-child(11) { top: 28%; left: 50%; animation-delay: 1.8s; }
.act--3 .act__stars span:nth-child(12) { top: 32%; left: 64%; animation-delay: .3s; }
.act--3 .act__stars span:nth-child(13) { top: 26%; left: 76%; animation-delay: .7s; }
.act--3 .act__stars span:nth-child(14) { top: 38%; left: 88%; animation-delay: 1.1s; }
.act--3 .act__stars span:nth-child(15) { top: 14%; left: 72%; animation-delay: 1.5s; }
.act--3 .act__stars span:nth-child(16) { top: 20%; left: 36%; animation-delay: 1.9s; }
.act--3 .act__stars span:nth-child(17) { top: 5%;  left: 48%; animation-delay: .1s; }
.act--3 .act__stars span:nth-child(18) { top: 16%; left: 4%;  animation-delay: 1.3s; }
.act--3 .act__stars span:nth-child(19) { top: 36%; left: 42%; animation-delay: 1.7s; }
.act--3 .act__stars span:nth-child(20) { top: 40%; left: 58%; animation-delay: .5s; }
.act--3 .act__stars span:nth-child(n+21) { display: none; }

@keyframes twinkle {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}
.act--3 .act__moon {
  position: absolute;
  top: 8%; right: 10%;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF 0%, #F5E6C8 55%, #D4B370 100%);
  box-shadow: 0 0 40px rgba(245,230,200,0.4), 0 0 80px rgba(245,230,200,0.2);
  z-index: 1;
}
.act--3 .act__ship {
  position: absolute;
  bottom: 22%; left: -20%;
  width: 320px;
  z-index: 3;
  animation: shipCross 25s linear infinite, shipBob 4s var(--ease-in-out) infinite;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}
@keyframes shipCross {
  0%   { left: -20%; }
  100% { left: 100%; }
}
@keyframes shipBob {
  0%, 100% { transform: translateY(0)   rotate(-1.2deg); }
  50%      { transform: translateY(-6px) rotate(1.2deg); }
}
.ship-smoke { animation: smokeRise 2.4s var(--ease-out) infinite; }
.ship-smoke--2 { animation-delay: 1.2s; }
@keyframes smokeRise {
  0%   { opacity: 0.6; transform: translate(0, 0) scale(1); }
  100% { opacity: 0;   transform: translate(-10px, -30px) scale(2); }
}

/* Act 4 — Arrival */
.act--4 .act__skyline {
  position: absolute;
  bottom: 18%; left: 0;
  width: 100%; height: 55%;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.2));
}
.skyline-windows rect { animation: windowFlicker 4s var(--ease-in-out) infinite; }
.skyline-windows rect:nth-child(2n) { animation-delay: 1s; }
.skyline-windows rect:nth-child(3n) { animation-delay: 2s; }
@keyframes windowFlicker { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.act--4 .act__dock {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 18%;
  background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 100%);
  z-index: 2;
}
.act--4 .act__gantry {
  position: absolute;
  left: 15%; bottom: 16%;
  width: 400px; height: auto;
  z-index: 3;
}
.act--4 .gantry-trolley {
  transform: translateX(240px);
  animation: trolleyMove 5s var(--ease-in-out) infinite;
}
@keyframes trolleyMove {
  0%, 100% { transform: translate(240px, 0); }
  40%      { transform: translate(80px, 0); }
  60%      { transform: translate(80px, 50px); }
  80%      { transform: translate(240px, 0); }
}
.act--4 .act__stamp {
  position: absolute;
  bottom: 22%; left: 55%;
  z-index: 4;
  padding: .5rem 1rem;
  border: 3px solid #C1272D;
  color: #C1272D;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: rgba(250,246,238,0.9);
  border-radius: 4px;
  transform: rotate(-12deg) scale(0);
  animation: stampIn 0.6s var(--ease-spring) 1.5s forwards;
}
@keyframes stampIn {
  0%   { transform: rotate(-24deg) scale(3); opacity: 0; }
  70%  { transform: rotate(-10deg) scale(0.95); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); }
}

/* Act 5 — Delivered */
.act--5 .act__farmland {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: 45%;
  z-index: 1;
}
.act--5 .act__palm {
  position: absolute;
  bottom: 35%;
  width: 100px; height: auto;
  z-index: 2;
  transform-origin: bottom center;
}
.act--5 .act__palm--1 { left: 8%; animation: palmSway 4s var(--ease-in-out) infinite; }
.act--5 .act__palm--2 { right: 12%; width: 80px; animation: palmSway 4.5s var(--ease-in-out) infinite reverse; }
@keyframes palmSway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.act--5 .act__truck {
  position: absolute;
  bottom: 12%; left: -30%;
  width: 260px;
  z-index: 3;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
  animation: truckDrive 9s var(--ease-out) forwards;
}
@keyframes truckDrive {
  0%   { left: -30%; }
  70%  { left: 38%; }
  100% { left: 40%; }
}
.act--5 .act__cattle {
  position: absolute;
  bottom: 10%; right: 10%;
  width: 180px;
  z-index: 3;
  opacity: 0;
  animation: cattleAppear 1s var(--ease-out) 4s forwards,
             cattleWalk 6s var(--ease-in-out) 5s infinite;
}
@keyframes cattleAppear { to { opacity: 1; } }
@keyframes cattleWalk {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-20px); }
}
.act--5 .act__pile {
  position: absolute;
  bottom: 16%; left: 45%;
  width: 180px; height: 80px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  opacity: 0;
  animation: pileDrop 1s var(--ease-spring) 3s forwards;
}
@keyframes pileDrop {
  0%   { opacity: 0; transform: translateY(-40px); }
  60%  { opacity: 1; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.act--5 .act__pile span {
  background: linear-gradient(180deg, #D4B370, #A68345);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.act--5 .act__sunburst {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0.3) 20%, transparent 50%);
  opacity: 0;
  animation: sunburst 3s var(--ease-out) 5.5s forwards;
  pointer-events: none;
}
@keyframes sunburst {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.3; transform: scale(1); }
}
.act--5 .act__caption--final { color: var(--espresso); text-shadow: 0 2px 12px rgba(255,255,255,0.4); }
.act--5 .act__caption--final h3 { color: var(--charcoal); }
.act--5 .act__cta {
  margin-top: 1.5rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 5s forwards;
}

/* ============================================
   LOGISTICS PROCESS STEPS
   ============================================ */
.process {
  display: grid;
  gap: 1.5rem;
  list-style: none;
}
.process__step {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border-radius: var(--r-md);
  border: 1px solid rgba(59,47,47,0.08);
  transition: transform .4s var(--ease-spring),
              border-color .4s var(--ease-out),
              box-shadow .4s var(--ease-out);
}
.process__step:hover {
  transform: translateX(6px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.process__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
  min-width: 2.5rem;
}
.process__step h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  margin-bottom: .35rem;
}
.process__step p {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(59,47,47,0.75);
}
.process-diagram {
  display: flex;
  justify-content: center;
  padding: 1rem;
}
.diagram-svg { max-width: 420px; width: 100%; }
.diagram-svg .flow {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.diagram-svg.is-visible .flow { stroke-dashoffset: 0; }
.diagram-svg.is-visible .flow {
  animation: flowPulse 2.5s var(--ease-in-out) infinite 1.2s;
}
@keyframes flowPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(232,184,75,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(232,184,75,0.7)); }
}
.diagram-svg .node circle {
  transition: fill .4s var(--ease-out), stroke-width .4s var(--ease-out);
}
.diagram-svg.is-visible .node circle {
  animation: nodePulse 3s var(--ease-in-out) infinite;
}
.diagram-svg.is-visible .node:nth-of-type(1) circle { animation-delay: 0s; }
.diagram-svg.is-visible .node:nth-of-type(2) circle { animation-delay: .6s; }
.diagram-svg.is-visible .node:nth-of-type(3) circle { animation-delay: 1.2s; }
.diagram-svg.is-visible .node:nth-of-type(4) circle { animation-delay: 1.8s; }
@keyframes nodePulse {
  0%, 100% { fill: rgba(200,146,42,0.1); }
  50%      { fill: rgba(200,146,42,0.25); }
}

/* ============================================
   CONTACT FORMS — floating labels
   ============================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}
.contact-form__head {
  margin-bottom: .5rem;
}
.contact-form__head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--charcoal);
  margin-top: .25rem;
}
.field {
  position: relative;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 1.2rem 0 .5rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(59,47,47,0.25);
  color: var(--espresso);
  font-size: 1rem;
  outline: none;
  transition: border-color .3s var(--ease-out);
  border-radius: 0;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1L5 5L9 1' stroke='%233B2F2F' stroke-width='1.2' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right .25rem center;
  padding-right: 1.5rem;
}
.field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}
.field label {
  position: absolute;
  top: 1.2rem; left: 0;
  font-size: 1rem;
  color: rgba(59,47,47,0.55);
  pointer-events: none;
  transition: top .25s var(--ease-out),
              font-size .25s var(--ease-out),
              color .25s var(--ease-out),
              letter-spacing .25s var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--gold); }
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field select:valid ~ label {
  top: -2px;
  font-size: .7rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.field .hint {
  font-size: .7rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(59,47,47,0.4);
  margin-left: .5rem;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-bottom-color: #C1272D; }

.btn--block {
  display: flex;
  width: 100%;
  margin-top: .5rem;
}

/* Success state */
.form-success {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
}
.contact-form.is-submitted > .form-success { display: block; animation: fadeUp .6s var(--ease-out); }
.contact-form.is-submitted > :not(.form-success) { display: none; }
.success-check {
  width: 72px; height: 72px;
  margin: 0 auto 1.25rem;
}
.success-check .success-ring {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: checkRing 0.9s var(--ease-out) forwards;
}
.success-check .success-tick {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkTick 0.5s var(--ease-out) 0.7s forwards;
}
@keyframes checkRing { to { stroke-dashoffset: 0; } }
@keyframes checkTick { to { stroke-dashoffset: 0; } }
.form-success h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--charcoal);
  margin-bottom: .5rem;
}
.form-success p { font-size: .95rem; color: rgba(59,47,47,0.7); }
.form-success a { color: var(--gold); border-bottom: 1px solid var(--gold); }

/* ============================================
   FLOATING BUTTONS
   ============================================ */
.wa-btn {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  animation: whatsappBreathe 2.5s var(--ease-in-out) infinite;
  transition: transform .3s var(--ease-spring);
}
.wa-btn svg { width: 32px; height: 32px; }
.wa-btn:hover { transform: scale(1.1); }
.wa-btn__tooltip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: .5rem .9rem;
  background: var(--charcoal);
  color: var(--white);
  font-size: .8rem;
  white-space: nowrap;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.wa-btn__tooltip::after {
  content: '';
  position: absolute;
  left: 100%; top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--charcoal);
}
.wa-btn:hover .wa-btn__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@keyframes whatsappBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 74px);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-spring);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold); }

html[dir="rtl"] .wa-btn,
html[dir="rtl"] .to-top { right: auto; left: clamp(1rem, 3vw, 2rem); }
html[dir="rtl"] .wa-btn__tooltip { right: auto; left: 72px; }
html[dir="rtl"] .wa-btn__tooltip::after {
  left: auto; right: 100%;
  border-left-color: transparent; border-right-color: var(--charcoal);
}

.hp-field { position: absolute; left: -10000px; }