/* ============================================================
   GITMNO — motion layer
   Animated voyage hero + deviant micro-motion everywhere.
   ============================================================ */

/* ---------- Voyage hero scene ---------- */

.voyage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 4px solid #fff;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 30rem;
  background: linear-gradient(#F7F2E6 0%, #F2E7D3 32%, #0E8C96 32.2%);
  isolation: isolate;
}
@media (min-width: 1024px) {
  .hero .voyage { transform: rotate(-1deg); flex: 0 1 26rem; max-width: 26rem; }
  .hero-grid .hero-text { flex: 1 1 auto; }
}

/* sun */
.v-sun { position: absolute; top: 5%; left: 6%; width: 17%; aspect-ratio: 1; z-index: 2; }
.v-sun-core {
  position: absolute; inset: 28%;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 22px rgba(242, 183, 5, 0.55);
}
.v-sun-rays { position: absolute; inset: -6%; animation: spin 46s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* clouds */
.v-cloud {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  filter: blur(1.5px);
  animation-name: cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.v-cloud::before, .v-cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 999px;
}
.v-cloud::before { width: 55%; height: 70%; left: -18%; top: 26%; }
.v-cloud::after { width: 45%; height: 55%; right: -14%; top: 34%; }
.c1 { top: 9%; width: 21%; height: 6.5%; animation-duration: 44s; }
.c2 { top: 20%; left: 46%; width: 15%; height: 5%; animation-duration: 62s; }
.c3 { top: 7%; left: 62%; width: 17%; height: 5.5%; animation-duration: 78s; }
@keyframes cloud-drift {
  from { left: -25%; }
  to { left: 115%; }
}

/* sea + waves */
.v-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 68%; z-index: 1; }
.v-wave {
  position: absolute; left: 0;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
}
.w1 { bottom: 0; height: 100%; animation: wave-l 16s linear infinite; }
.w2 { bottom: 9%; height: 72%; animation: wave-l 10s linear infinite; }
.w3 { bottom: 17%; height: 50%; animation: wave-r 7s linear infinite; }
@keyframes wave-l { to { transform: translateX(-50%); } }
@keyframes wave-r { to { transform: translateX(50%); } }

/* island (inline svg) */
.v-isle {
  position: absolute;
  right: 7%; bottom: 5%;
  width: 35%;
  z-index: 3;
  transform-origin: 50% 90%;
  animation: isle-sway 6s ease-in-out infinite;
}
@keyframes isle-sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(1.2deg); }
}

/* the boat */
.v-boat-wrap {
  position: absolute;
  top: 35%;
  left: -24%;
  width: 27%;
  z-index: 5;
  animation: sail 26s linear infinite;
}
.v-boat {
  position: relative;
  width: 100%;
  animation: bob 3.8s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(20, 24, 62, 0.18));
}
.v-wake {
  position: absolute;
  left: 8%; top: 86%;
  width: 78%; height: 11%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  filter: blur(5px);
  opacity: 0.85;
  animation: wake-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes sail {
  0% { left: -24%; }
  100% { left: 112%; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.8deg); }
  50% { transform: translateY(-10px) rotate(1.8deg); }
}
@keyframes wake-pulse {
  from { opacity: 0.35; transform: scaleX(0.85); }
  to { opacity: 0.9; transform: scaleX(1.05); }
}

/* ---------- Headline line-rise (replaces fade-down) ---------- */

.rise-line { display: block; overflow: hidden; }
.rise-line > span {
  display: inline-block;
  transform: translateY(118%);
  animation: rise .85s cubic-bezier(.22, .8, .24, 1) forwards;
}
@keyframes rise { to { transform: translateY(0); } }

/* ---------- Wave divider between sections ---------- */

.wave-divider {
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C 15 4, 30 4, 45 20 S 75 36, 90 20 S 105 4, 120 20 L 120 26 L 0 26 Z' fill='%2357C4CC' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 120px 26px;
  opacity: 0.9;
  animation: divider-drift 12s linear infinite;
}
@keyframes divider-drift { to { background-position-x: -120px; } }

/* ---------- ON AIR indicator ---------- */

.onair {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--red);
}
.onair::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-bright);
  animation: pulse 1.6s ease-in-out infinite;
}
@media (min-width: 768px) { .onair { display: flex; } }

/* ---------- Fanned cards (deviant from the flat HOC row) ---------- */

.card-row .card:nth-child(2) { transform: translateY(-12px); }
.card-row .card:hover { transform: scale(1.045) rotate(-1.1deg); }
.card-row .card:nth-child(2):hover { transform: scale(1.045) rotate(1.1deg) translateY(-12px); }
.card-row .card:nth-child(3) { transform: translateY(6px); }
.card-row .card:nth-child(3):hover { transform: scale(1.045) rotate(1.1deg) translateY(6px); }
.card { transition: transform 0.25s cubic-bezier(.2, .7, .2, 1.4), box-shadow 0.25s ease; }

/* blog / caption-card image zoom on hover */
.caption-card .frame, .post-card .post-art { overflow: hidden; }
.caption-card .frame img, .post-card .post-art img {
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}
.caption-card:hover .frame img, .post-card:hover .post-art img { transform: scale(1.06); }

/* ---------- Beach cam extras ---------- */

.cam-wave { margin-left: auto; opacity: 0.9; }
.cam-vu {
  display: flex;
  justify-content: center;
  padding: 1.15rem 0 1.4rem;
}
.cam-vu svg, .cam-wave svg { display: block; }

.beach-cam pre { position: relative; }
.beach-cam pre::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26%;
  background: linear-gradient(transparent, rgba(87, 196, 204, 0.10) 45%, rgba(87, 196, 204, 0.18) 50%, rgba(87, 196, 204, 0.10) 55%, transparent);
  animation: scan-sweep 5s linear infinite;
  pointer-events: none;
}
@keyframes scan-sweep { 0% { transform: translateY(-120%); } 100% { transform: translateY(420%); } }

/* ---------- Reveal variants (beyond HOC fade-down) ---------- */

.reveal-left { transform: translateX(-2.2rem); }
.reveal-right { transform: translateX(2.2rem); }
.reveal-up { transform: translateY(2.2rem); }
.reveal-spin { transform: translateY(-1.5rem) rotate(-1.6deg); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- CTA pulse ---------- */

.cta-band .btn-red { animation: cta-glow 2.6s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

/* ---------- Ticker speed ---------- */

.ticker-track { animation-duration: 22s; }

@media (prefers-reduced-motion: reduce) {
  .voyage *,
  .v-boat-wrap, .v-wake, .v-isle, .v-sun-rays, .v-cloud,
  .eq i, .beach-cam pre::after, .wave-divider,
  .rise-line > span, .cta-band .btn-red {
    animation: none !important;
  }
  .rise-line > span { transform: none; }
}
/* ---------- The View: cam + island two-col ---------- */

.view-grid { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .view-grid { flex-direction: row; align-items: stretch; justify-content: center; }
  .view-grid .beach-cam { flex: 1 1 52%; max-width: 40rem; margin: 0; align-self: center; }
  .view-grid .caption-card { flex: 0 1 40%; max-width: 34rem; margin: 0; align-self: center; }
}