/* ─────────────────────────────────────────────────────────
   SERVICE THEATER — fullscreen immersive scenes
   ───────────────────────────────────────────────────────── */

.theater {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  background: #05111a;
  overflow: hidden;
}
.theater.open { display: block; animation: theaterIn 0.45s cubic-bezier(.2,.7,.2,1); }
@keyframes theaterIn {
  from { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); }
  to   { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
}
.theater.closing { animation: theaterOut 0.35s ease-in forwards; }
@keyframes theaterOut {
  from { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); opacity: 1; }
  to   { clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%)); opacity: 0.7; }
}

.theater-close {
  position: absolute; top: 24px; right: 28px; z-index: 100;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.15);
  font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(8px);
}
.theater-close:hover { background: rgba(255,255,255,0.18); transform: scale(1.05) rotate(90deg); }

.theater-eyebrow {
  position: absolute; top: 32px; left: 36px; z-index: 50;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 10px;
}
.theater-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.theater-eyebrow .live { color: #8ff1bc; }

.theater-info {
  position: absolute; left: 36px; bottom: 36px; z-index: 50;
  max-width: 440px;
  color: white;
}
.theater-info h2 {
  font-family: 'Inter', sans-serif; font-weight: 900; letter-spacing: -0.025em;
  font-size: clamp(40px, 5vw, 64px); line-height: 0.95; margin: 0 0 14px;
  text-wrap: balance;
}
.theater-info h2 em { font-style: italic; color: #8ff1bc; font-weight: 900; }
.theater-info p {
  font-size: 15px; line-height: 1.55; opacity: 0.8; margin: 0 0 22px;
  max-width: 420px;
}
.theater-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.theater-stats .stat .num { font-size: 26px; font-weight: 900; color: white; letter-spacing: -0.02em; }
.theater-stats .stat .lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; margin-top: 2px; }
.theater-cta {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  background: #8ff1bc; color: #0b1a28;
  font-weight: 800; font-size: 13px; letter-spacing: 0.02em;
  padding: 12px 22px; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 10px 30px rgba(143,241,188,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.theater-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(143,241,188,0.35); }

.theater-ticker {
  position: absolute; right: 28px; bottom: 36px; z-index: 50;
  font-family: 'Inter', monospace; font-size: 11px;
  color: rgba(255,255,255,0.55); text-align: right;
  display: flex; flex-direction: column; gap: 8px;
}
.theater-ticker .row { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.theater-ticker .dot { width: 6px; height: 6px; border-radius: 50%; background: #8ff1bc; box-shadow: 0 0 8px #8ff1bc; }
.theater-ticker .dot.amber { background: #fd7d02; box-shadow: 0 0 8px #fd7d02; }

.theater-hint {
  position: absolute; left: 50%; top: 90px; transform: translateX(-50%);
  z-index: 50;
  font-family: 'Inter'; font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  animation: hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* Scene root (legacy SVG scenes — kept for any future use) */
.scn { position: absolute; inset: 0; width: 100%; height: 100%; }
.scn-bg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── Photographic backdrop layers ─── */
.theater-photo-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: ken-burns 18s ease-in-out infinite alternate;
  will-change: transform;
}
.theater-photo-tint {
  position: absolute; inset: 0; pointer-events: none;
}
/* Per-scene fallback gradients (also do tinting/vignettes for legibility) */
.theater-photo-tint-ocean     { background: linear-gradient(180deg, rgba(8,28,46,0.25) 0%, rgba(8,28,46,0.45) 60%, rgba(6,32,50,0.85) 100%); }
.theater-photo-tint-air       { background: linear-gradient(180deg, rgba(20,60,100,0.15) 0%, rgba(200,224,240,0.3) 50%, rgba(232,242,247,0.6) 100%); }
.theater-photo-tint-warehouse { background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.6) 100%); }
.theater-photo-tint-land      { background: linear-gradient(180deg, rgba(40,30,20,0.25) 0%, rgba(20,10,5,0.7) 100%); }
.theater-photo-tint-customs   { background: radial-gradient(ellipse at 70% 30%, rgba(255,200,120,0.15) 0%, rgba(0,0,0,0.7) 80%); }
.theater-photo-tint-roro      { background: linear-gradient(180deg, rgba(60,20,30,0.2) 0%, rgba(40,10,30,0.7) 100%); }
.theater-photo-tint-breakbulk { background: linear-gradient(180deg, rgba(10,18,30,0.55) 0%, rgba(5,10,18,0.85) 100%); }
.theater-photo-tint-special   { background: radial-gradient(ellipse at 50% 50%, rgba(11,26,40,0.5) 30%, rgba(5,12,22,0.85) 100%); }

/* Fallback colors if photo doesn't load */
.theater-photo-ocean     { background-color: #146a8a; background-image: linear-gradient(180deg, #80c5dd 0%, #146a8a 100%); }
.theater-photo-air       { background-color: #8cc5e8; background-image: linear-gradient(180deg, #5a9dd6 0%, #e8f2f7 100%); }
.theater-photo-warehouse { background-color: #1c1f24; background-image: linear-gradient(180deg, #2a2820 0%, #0d0f12 100%); }
.theater-photo-land      { background-color: #a89968; background-image: linear-gradient(180deg, #c8d8e8 0%, #5a6644 100%); }
.theater-photo-customs   { background-color: #2a3020; background-image: radial-gradient(ellipse at 50% 60%, #2a4a3a 0%, #08130c 100%); }
.theater-photo-roro      { background-color: #c95a3d; background-image: linear-gradient(180deg, #fcbf4d 0%, #5a2238 100%); }
.theater-photo-breakbulk { background-color: #1f2e3e; background-image: linear-gradient(180deg, #3a4a5a 0%, #0a1a2a 100%); }
.theater-photo-special   { background-color: #0b1a28; background-image: radial-gradient(circle at 50% 40%, #1f3a52 0%, #0b1a28 70%); }

.theater-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ─── Overlay sprite positioning ─── */
.ovr { position: absolute; }
.ovr-ship { left: 18%; top: 38%; width: 64%; max-width: 1100px; }
.ovr-plane { left: 18%; top: 22%; width: 64%; max-width: 1100px; }
.ovr-forklift { right: 4%; bottom: 8%; width: 360px; }
.ovr-worker { left: 10%; bottom: 8%; width: 100px; height: 220px; }
.ovr-truck { left: 50%; top: 60%; transform: translate(-50%, -10%); width: min(72vw, 980px); animation: bob 0.18s linear infinite; }
.ovr-roadlines { position: absolute; left: 0; right: 0; bottom: 14%; height: 8px;
  background: repeating-linear-gradient(90deg, #fcbf4d 0 90px, transparent 90px 140px);
  animation: drift-x 0.5s linear infinite; opacity: 0.85;
}
.ovr-customs { width: 100%; height: 100%; }
.ovr-stamp { left: 50%; top: 55%; transform: translateX(-50%); width: 200px; height: 280px; pointer-events: none; z-index: 6; }
.ovr-roro { left: 22%; top: 28%; width: 64%; max-width: 1100px; }
.ovr-rorocar { position: absolute; left: 34%; top: 65%; width: 120px; height: 60px; }
.ovr-crane { width: 100%; height: 100%; }
.ovr-special { width: 100%; height: 100%; }
.ovr-cloud { position: absolute; left: 0; pointer-events: none; }
.ovr-fg-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; width: 100%; }

/* ─── Particles ─── */
.splash { position: absolute; pointer-events: none; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(180,220,240,0.4));
  box-shadow: 0 0 8px rgba(255,255,255,0.6); z-index: 30; }
.contrail { position: absolute; pointer-events: none; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(255,255,255,0)); z-index: 30; }
.spark { position: absolute; pointer-events: none; width: 5px; height: 5px; border-radius: 50%;
  background: #fd7d02; box-shadow: 0 0 10px #fd7d02, 0 0 20px rgba(253,125,2,0.5); z-index: 30; }
.dust { position: absolute; pointer-events: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,200,150,0.7), rgba(220,200,150,0)); z-index: 30; }
.inkdrop { position: absolute; pointer-events: none; width: 6px; height: 6px; border-radius: 50%;
  background: #c9282d; box-shadow: 0 0 6px rgba(201,40,45,0.7); z-index: 30; }
.snowflake { position: absolute; pointer-events: none; color: white; font-size: 14px; z-index: 30; }

/* ─── Keyframes ─── */
@keyframes drift-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1.2deg); } }
@keyframes bob-fast { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes plane-drift { 0%,100% { transform: translate(0,0) rotate(-1.5deg); } 50% { transform: translate(6px,-6px) rotate(1.5deg); } }
@keyframes cloud-drift { from { transform: translateX(110vw); } to { transform: translateX(-300px); } }
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes spin-medium { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes truck-bounce { 0%,100% { transform: translateY(0); } 33% { transform: translateY(-1.5px); } 66% { transform: translateY(0.5px); } }
@keyframes wheel-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes road-stream {
  from { transform: translateX(0); }
  to   { transform: translateX(-160px); }
}
@keyframes conveyor-belt {
  from { background-position: 0 0; }
  to   { background-position: -80px 0; }
}
@keyframes walk { 
  0%,100% { transform: translateY(0); } 
  50% { transform: translateY(-2px); }
}
@keyframes arm-swing { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes arm-swing-r { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }
@keyframes leg-step-l { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes leg-step-r { 0%,100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes worker-march {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(var(--march-distance, 700px) * 1)); }
}
@keyframes box-drift {
  from { transform: translateX(-200px); }
  to   { transform: translateX(1920px); }
}
@keyframes lift-rise {
  0%,100% { transform: translateY(0); }
  40%,60% { transform: translateY(-50px); }
}
@keyframes stamp-cycle {
  0% { transform: translate(0, -180px) rotate(-6deg); }
  18% { transform: translate(0, -180px) rotate(-6deg); }
  26% { transform: translate(0, 0) rotate(0deg); }
  32% { transform: translate(0, -10px) rotate(-2deg); }
  40% { transform: translate(0, -180px) rotate(-8deg); }
  100% { transform: translate(0, -180px) rotate(-8deg); }
}
@keyframes stamp-flash {
  0%,18% { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  26% { opacity: 1; transform: scale(1.05) rotate(-10deg); }
  35% { opacity: 1; transform: scale(1) rotate(-10deg); }
  85% { opacity: 1; transform: scale(1) rotate(-10deg); }
  100% { opacity: 0; transform: scale(1) rotate(-10deg); }
}
@keyframes paper-slide {
  0% { transform: translate(-700px, 30px) rotate(-3deg); }
  20% { transform: translate(0, 0) rotate(0); }
  60% { transform: translate(0, 0) rotate(0); }
  100% { transform: translate(800px, 30px) rotate(2deg); opacity: 0; }
}
@keyframes flag-wave {
  0%,100% { transform: skewY(0deg); }
  50% { transform: skewY(-2deg); }
}
@keyframes desk-light-flicker {
  0%,100% { opacity: 0.85; }
  92% { opacity: 0.85; }
  94% { opacity: 0.5; }
  96% { opacity: 0.85; }
}
@keyframes gull-flap {
  0%,100% { d: path("M 0 0 q 12 -10 24 0 q 12 -10 24 0"); }
  50% { d: path("M 0 0 q 12 6 24 0 q 12 6 24 0"); }
}
@keyframes splash-fg {
  0% { transform: translateY(20px) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-60px) scale(1.4); opacity: 0; }
}
@keyframes ship-foam {
  from { transform: translateX(0); opacity: 0.65; }
  to   { transform: translateX(-40px); opacity: 0; }
}
@keyframes crane-swing {
  0%,100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes container-rise {
  0%,100% { transform: translateY(120px); }
  45%,55% { transform: translateY(0); }
}

/* Animation classes (applied on scene SVGs) */
.a-bob { animation: bob 4s ease-in-out infinite; transform-origin: center bottom; }
.a-bob-fast { animation: bob 2.2s ease-in-out infinite; }
.a-bob-slow { animation: bob 6.5s ease-in-out infinite; }
.a-plane { animation: plane-drift 5s ease-in-out infinite; }
.a-drift-14 { animation: drift-x 14s linear infinite; }
.a-drift-9 { animation: drift-x 9s linear infinite; }
.a-drift-7 { animation: drift-x 7s linear infinite; }
.a-drift-6r { animation: drift-x 6s linear infinite reverse; }
.a-drift-4r { animation: drift-x 4s linear infinite reverse; }
.a-spin-slow { animation: spin-slow 18s linear infinite; transform-origin: center; transform-box: fill-box; }
.a-spin-fast { animation: spin-slow 0.4s linear infinite; transform-origin: center; transform-box: fill-box; }
.a-truck-bounce { animation: truck-bounce 0.2s linear infinite; }
.a-stamp { animation: stamp-cycle 3.2s cubic-bezier(.4,1.6,.6,1) infinite; transform-origin: top center; }
.a-stamp-flash { animation: stamp-flash 3.2s linear infinite; }
.a-paper-slide { animation: paper-slide 6.4s linear infinite; }
.a-flag { animation: flag-wave 2.6s ease-in-out infinite; transform-origin: top center; }
.a-flicker { animation: desk-light-flicker 4s linear infinite; }
.a-crane { animation: crane-swing 7s ease-in-out infinite; transform-origin: bottom center; }
.a-container { animation: container-rise 6s ease-in-out infinite; }
.a-leg-l { animation: leg-step-l 0.6s linear infinite; transform-origin: top center; transform-box: fill-box; }
.a-leg-r { animation: leg-step-r 0.6s linear infinite; transform-origin: top center; transform-box: fill-box; }
.a-arm-l { animation: arm-swing 0.6s linear infinite; transform-origin: top center; transform-box: fill-box; }
.a-arm-r { animation: arm-swing-r 0.6s linear infinite; transform-origin: top center; transform-box: fill-box; }
.a-walk { animation: walk 0.6s linear infinite; }
.a-conveyor { animation: conveyor-belt 0.6s linear infinite; }
.a-box-drift { animation: box-drift 12s linear infinite; }
.a-lift { animation: lift-rise 4s ease-in-out infinite; }

/* ─── Customs desk specifics ─── */
.desk-paper {
  position: absolute;
  background: linear-gradient(180deg, #f9f5e8, #e9e0c8);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.desk-paper .lines {
  position: absolute; inset: 18px 16px 16px 16px;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0.55) 0 1.5px, transparent 1.5px 11px);
  opacity: 0.35;
}
.desk-paper .header {
  position: absolute; left: 18px; right: 16px; top: 6px; height: 12px;
  background: linear-gradient(90deg, #2a5a3a, #45b87c);
  border-radius: 2px;
}
.desk-paper .seal {
  position: absolute; top: 30px; right: 18px; width: 36px; height: 36px;
  border: 2px solid rgba(201,40,45,0.65); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 8px/1 Inter; color: #c9282d; letter-spacing: 0.05em;
}

.stamp-mark {
  position: absolute;
  width: 130px; height: 50px; border: 4px solid #c9282d; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter'; font-weight: 900; color: #c9282d;
  font-size: 22px; letter-spacing: 0.12em;
  opacity: 0;
  text-shadow: 0 0 2px rgba(201,40,45,0.5);
}
.stamp-mark::before {
  content: ""; position: absolute; inset: -2px;
  background:
    radial-gradient(circle at 20% 30%, transparent 0 6px, rgba(201,40,45,0.0) 6px 14px),
    radial-gradient(circle at 80% 70%, transparent 0 8px, rgba(201,40,45,0.0) 8px 14px);
  mix-blend-mode: multiply;
}

/* generic glow */
.glow-green { filter: drop-shadow(0 0 8px rgba(143,241,188,0.55)); }
.glow-orange { filter: drop-shadow(0 0 8px rgba(253,125,2,0.6)); }

/* Service card teaser hover lift */
.service-tile {
  cursor: pointer; transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
  position: relative;
}
.service-tile:hover { transform: translateY(-10px); }
.service-tile:hover .tile-hint { opacity: 1; transform: translateY(0); }
.tile-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translate(-50%, 6px);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #8ff1bc; opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  background: rgba(143,241,188,0.1);
  border: 1px solid rgba(143,241,188,0.3);
  padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
  font-weight: 700;
  pointer-events: none;
}
.tile-hint::after { content: " →"; }