/* =========================================================
   OTK — World-class motion, shutter, graphics layer
   ========================================================= */

/* Opening shutter (camera iris) */
.otk-shutter {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #040b16;
  overflow: hidden;
  transition: opacity .55s cubic-bezier(.22,1,.36,1), visibility .55s;
}
.otk-shutter.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.otk-shutter.is-skip {
  display: none !important;
}
body.shutter-lock {
  overflow: hidden;
}
.shutter-vignette {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 45%, transparent 18%, rgba(4,11,22,.55) 55%, #040b16 78%),
    radial-gradient(circle at 70% 30%, rgba(201,162,39,.18), transparent 40%),
    radial-gradient(circle at 25% 70%, rgba(58,143,183,.16), transparent 42%);
  animation: vignettePulse 2.4s ease-in-out infinite alternate;
}
@keyframes vignettePulse {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(1.06); opacity: 1; }
}
.shutter-stage {
  position: relative;
  width: min(78vw, 420px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.shutter-blades {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(201,162,39,.35), 0 0 80px rgba(201,162,39,.2);
}
.shutter-blade {
  --i: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  height: 62%;
  background: linear-gradient(160deg, #0B1F3A 0%, #16335A 45%, #071526 100%);
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 0, 55% 100%);
  transform: rotate(calc(var(--i) * 45deg)) translate(-2%, -2%);
  border-top: 1px solid rgba(201,162,39,.35);
  transition: transform 1.05s cubic-bezier(.65,0,.35,1);
  transition-delay: calc(var(--i) * 35ms + .85s);
}
.otk-shutter.is-opening .shutter-blade {
  transform: rotate(calc(var(--i) * 45deg + 58deg)) translate(118%, -8%);
}
.shutter-ring {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(#040b16, #040b16) padding-box,
    conic-gradient(from 200deg, #0B1F3A, #C9A227, #E0B93A, #3A8FB7, #0B1F3A) border-box;
  animation: ringSpin 8s linear infinite;
  opacity: .95;
  pointer-events: none;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.otk-shutter.is-opening .shutter-ring {
  animation: ringOut .9s .9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes ringOut {
  to { transform: scale(1.45); opacity: 0; }
}
.shutter-core {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: logoIn 1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(.72) translateY(12px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
.shutter-logo {
  width: min(52vw, 230px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
  animation: logoFloat 2.2s ease-in-out infinite alternate;
}
@keyframes logoFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}
.otk-shutter.is-opening .shutter-core {
  animation: logoExit .85s .75s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes logoExit {
  to { opacity: 0; transform: scale(1.25); filter: blur(6px); }
}
.shutter-tag {
  margin: .85rem 0 0;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 700;
}
.shutter-progress {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  width: min(180px, 40vw);
  height: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.12);
  overflow: hidden;
  border-radius: 2px;
}
.shutter-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #C9A227, #E0B93A);
  animation: loadBar 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes loadBar { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .otk-shutter,
  .otk-shutter * {
    animation: none !important;
    transition: opacity .2s !important;
  }
}

/* Ambient canvas */
#otk-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
}
/* Do NOT force position:relative on all body children — breaks mobile fixed/sticky */
.site-header { z-index: 100; }
.sticky-cta { z-index: 90; }
.dock-cta { z-index: 90; }
main { position: relative; z-index: 1; }

/* Richer page atmosphere */
body {
  background:
    radial-gradient(900px 500px at 8% -5%, rgba(58,143,183,.14), transparent 55%),
    radial-gradient(700px 420px at 95% 8%, rgba(201,162,39,.12), transparent 50%),
    radial-gradient(600px 400px at 50% 100%, rgba(45,90,61,.08), transparent 50%),
    linear-gradient(180deg, #F4F7FA 0%, #F7F5F1 40%, #EEF2F6 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Brand mark polish */
.brand-logo {
  background: transparent !important;
  mix-blend-mode: normal;
}
.hero-brand-mark {
  width: 140px !important;
  height: 140px !important;
  object-fit: contain;
  background: transparent !important;
  border-radius: 0;
  margin-bottom: 1.1rem;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.35));
  animation: fadeUp .9s var(--ease) both, logoGlow 3s ease-in-out 1s infinite alternate;
}
.shutter-logo {
  background: transparent !important;
  border-radius: 0;
  object-fit: contain;
}

/* Hero — cinematic */
.hero {
  min-height: min(100svh, 900px);
  isolation: isolate;
}
.hero-media {
  transform-origin: center center;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(201,162,39,.18), transparent 35%),
    radial-gradient(circle at 20% 80%, rgba(58,143,183,.2), transparent 40%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.hero-gfx {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: -1;
  opacity: .55;
  pointer-events: none;
}
.hero-gfx img,
.hero-gfx object,
.hero-gfx svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .plane-trail {
  position: absolute;
  top: 14%;
  right: 8%;
  width: min(42vw, 420px);
  height: 120px;
  z-index: -1;
  opacity: .85;
  pointer-events: none;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: orbDrift 10s ease-in-out infinite alternate;
}
.hero-orb.o1 {
  width: 220px; height: 220px; top: 18%; left: 8%;
  background: rgba(201,162,39,.28);
}
.hero-orb.o2 {
  width: 280px; height: 280px; bottom: 20%; right: 5%;
  background: rgba(58,143,183,.28);
  animation-delay: -3s;
}
@keyframes orbDrift {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(24px,-18px) scale(1.12); }
}

.hero-content {
  padding-bottom: 5.5rem;
}
@keyframes logoGlow {
  from { filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
  to { filter: drop-shadow(0 14px 36px rgba(201,162,39,.45)); }
}
.hero h1 {
  text-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.hero h1 .script {
  position: relative;
  display: inline-block;
  background: linear-gradient(120deg, #E0B93A, #fff2b0 45%, #C9A227);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: scriptShine 4s ease-in-out infinite;
}
@keyframes scriptShine {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 18px rgba(224,185,58,.45)); }
}

.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn-gold {
  box-shadow: 0 10px 30px rgba(201,162,39,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-magnetic {
  will-change: transform;
}

/* Marquee strip */
.marquee {
  overflow: hidden;
  background: linear-gradient(90deg, #071526, #0B1F3A 40%, #16335A 70%, #071526);
  color: rgba(255,255,255,.8);
  border-block: 1px solid rgba(201,162,39,.25);
  padding: .85rem 0;
}
.marquee-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 28s linear infinite;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
}
.marquee-track span { white-space: nowrap; }
.marquee-track em {
  font-style: normal;
  color: var(--gold-bright);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Trust bar upgrade */
.trust-bar {
  background:
    linear-gradient(90deg, rgba(201,162,39,.12), transparent 30%, transparent 70%, rgba(58,143,183,.12)),
    var(--navy);
  position: relative;
  overflow: hidden;
}
.trust-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  animation: trustSheen 5s linear infinite;
  pointer-events: none;
}
@keyframes trustSheen {
  from { transform: translateX(-40%); }
  to { transform: translateX(40%); }
}
.trust-item {
  position: relative;
  padding: .35rem .5rem;
}
.trust-item strong {
  background: linear-gradient(90deg, #E0B93A, #fff1b0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cards — glass + shine */
.card {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  position: relative;
  transform-style: preserve-3d;
  perspective: 800px;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, rgba(201,162,39,.45), transparent 40%, rgba(58,143,183,.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
}
.card:hover::before { opacity: 1; }
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7,21,38,.55));
  opacity: .65;
}
.card-badge {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201,162,39,.35);
}

/* Section ornaments */
.section-head {
  position: relative;
}
.section-head::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 1rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section-ornament {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.2);
  pointer-events: none;
  animation: spinSlow 40s linear infinite;
}
.section-ornament::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px dashed rgba(11,31,58,.12);
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Destination mosaic */
.dest-mosaic {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: .9rem;
}
.dest-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-soft);
  min-height: 220px;
}
.dest-tile:first-child {
  grid-row: 1 / span 2;
  min-height: 100%;
}
.dest-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.dest-tile:hover img { transform: scale(1.08); }
.dest-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(7,21,38,.85));
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.dest-tile figcaption small {
  display: block;
  font-weight: 500;
  opacity: .8;
  font-size: .82rem;
  margin-top: .25rem;
}

/* Quote cards */
.quote {
  position: relative;
  overflow: hidden;
}
.quote::before {
  content: "“";
  position: absolute;
  top: -12px;
  right: 16px;
  font-size: 6rem;
  line-height: 1;
  color: rgba(201,162,39,.18);
  font-family: Georgia, serif;
  pointer-events: none;
}

/* CTA band particles feel */
.cta-band {
  isolation: isolate;
}
.cta-band::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -80px;
  top: -120px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,.25);
  animation: spinSlow 50s linear infinite;
  pointer-events: none;
}

/* Reveal variants */
.reveal { transition-delay: var(--d, 0ms); }
.reveal-left { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-scale { transform: scale(.94); }
.reveal.is-visible.reveal-left,
.reveal.is-visible.reveal-right,
.reveal.is-visible.reveal-scale { transform: none; }

/* Dock CTA sits above content; glow handled in main.css */
.dock-cta { z-index: 90; }

/* Footer depth */
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -180px;
  top: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 92, 74, 0.28), transparent 65%);
  pointer-events: none;
}
.footer-brand img {
  filter: drop-shadow(0 10px 24px rgba(201,162,39,.25));
  transition: transform .4s var(--ease);
}
.footer-brand:hover img { transform: scale(1.06) rotate(-4deg); }

/* Page hero upgrade */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -30% auto auto 55%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.2), transparent 65%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.55), transparent);
}

@media (max-width: 960px) {
  .dest-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .dest-tile:first-child {
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 280px;
  }
  .hero-brand-mark { width: 96px; height: 96px; }
}
@media (max-width: 640px) {
  .dest-mosaic { grid-template-columns: 1fr; }
  .shutter-logo { width: min(58vw, 180px); }
}