/* Andaman Now Ferry Animation v1.22.7 — mobile-stable scrolling and user-controlled pause behavior. */
.anfn-sea-section{position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden!important;pointer-events:none!important;touch-action:pan-y;background:#dffaff;z-index:2;box-sizing:border-box;contain:layout paint style;isolation:isolate}
@media(hover:hover) and (pointer:fine){.anfn-sea-section{pointer-events:auto!important}}
.anfn-water-layer{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:hidden}
.anfn-water-layer svg{display:block!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.anfn-water-surface{transform-origin:center;animation:anfnSeaBob 5.5s ease-in-out infinite alternate}
.anfn-wave-soft{animation:anfnWaveShift 7s ease-in-out infinite alternate}
.anfn-ripple-a{animation:anfnRipple 4.8s ease-in-out infinite alternate}
.anfn-ripple-b{animation:anfnRipple 6.1s ease-in-out infinite alternate-reverse}
@keyframes anfnSeaBob{from{transform:translateY(-2px) scaleY(.985)}to{transform:translateY(4px) scaleY(1.045)}}
@keyframes anfnWaveShift{from{transform:translateX(-7px)}to{transform:translateX(8px)}}
@keyframes anfnRipple{from{opacity:.25;transform:translateX(-10px)}to{opacity:.65;transform:translateX(10px)}}

/* Route checkpoints sit above the water but below the ferry. */
.anfn-route-points{position:absolute;z-index:5;left:12px;right:12px;top:2px;height:34px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-family:"Segoe UI",Arial,sans-serif}
.anfn-route-point{position:relative;flex:1 1 0;min-width:0;text-align:center;color:#053d5d;font-size:11px;font-weight:800;line-height:1.08;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.anfn-route-point.is-clickable{pointer-events:auto;cursor:pointer;outline:none}
.anfn-route-point.is-clickable:hover,.anfn-route-point.is-clickable:focus-visible{color:#ff6b35;text-decoration:underline;text-underline-offset:2px}
.anfn-route-point::after{content:"";display:block;width:7px;height:7px;margin:3px auto 0;border-radius:50%;background:#ff6b35;border:2px solid rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(3,61,88,.25)}
.anfn-route-point small{display:block;font-size:9px;font-weight:700;color:#087c8f}

.anfn-route-point.is-active{color:#022f4e;text-shadow:0 0 0 rgba(0,0,0,0),0 1px 0 rgba(255,255,255,.95)}
.anfn-route-point.is-active small{color:#0a8ea3}
.anfn-route-point.is-active::after{animation:anfnArrivalPulse 1.2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(255,107,53,.45),0 0 0 6px rgba(255,255,255,.15),0 3px 10px rgba(3,61,88,.28)}
@keyframes anfnArrivalPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.88}}
.anfn-arrival-note{position:absolute;left:50%;top:38px;transform:translateX(-50%) translateY(-6px);z-index:6;min-width:150px;max-width:min(86vw,340px);padding:7px 12px;border-radius:999px;background:rgba(3,31,61,.82);color:#fff;font:800 12px/1.15 "Segoe UI",Arial,sans-serif;letter-spacing:.2px;text-align:center;box-shadow:0 8px 18px rgba(3,31,61,.18);opacity:0;transition:opacity .25s ease,transform .25s ease}
.anfn-arrival-note.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.anfn-route-progress{position:absolute;z-index:3;left:0;right:0;top:31px;height:4px;pointer-events:none;overflow:visible}
.anfn-route-progress span{position:absolute;left:0;top:0;height:4px;width:0;border-radius:999px;background:linear-gradient(90deg,#ffd84d,#ff6b35,#ff4fd8);box-shadow:0 0 10px rgba(255,107,53,.42);transition:opacity .2s ease}
.anfn-route-progress span.is-reverse{background:linear-gradient(90deg,#ff4fd8,#ff6b35,#ffd84d)}

/* Crucial v1.5 change: ferry is its own fixed-aspect SVG, so responsive water never squashes it. */
.anfn-ferry-wrap{position:absolute;z-index:4;left:0;top:62%;width:286px;height:142px;transform:translate3d(0,-55%,0);will-change:transform;contain:layout paint style;filter:drop-shadow(0 4px 4px rgba(1,39,68,.28))}
.anfn-ferry-wrap svg{display:block;width:286px!important;height:142px!important;max-width:none!important;overflow:visible!important}
.anfn-ferry-banner{filter:drop-shadow(0 2px 2px rgba(1,39,68,.3))}
.anfn-ferry-name{font-family:"Arial Black","Segoe UI",Arial,sans-serif;font-weight:900;paint-order:stroke fill;stroke:#031f3d;stroke-width:.55px;stroke-linejoin:round}
.anfn-ferry-name-animated .anfn-letter{animation:anfnLetterGlow 3.4s ease-in-out infinite;fill:#fff}
.anfn-l1{animation-delay:0s!important}.anfn-l2{animation-delay:-.22s!important}.anfn-l3{animation-delay:-.44s!important}.anfn-l4{animation-delay:-.66s!important}.anfn-l5{animation-delay:-.88s!important}.anfn-l6{animation-delay:-1.10s!important}.anfn-l7{animation-delay:-1.32s!important}.anfn-l8{animation-delay:-1.54s!important}.anfn-l9{animation-delay:-1.76s!important}.anfn-l10{animation-delay:-1.98s!important}
@keyframes anfnLetterGlow{0%,100%{fill:#ffffff}18%{fill:#ffd84d}36%{fill:#ff9f1c}54%{fill:#ff5a5f}72%{fill:#ff4fd8}88%{fill:#b7ff4a}}


/* Bigger, wind-driven Indian tricolour. The mast stays rigid; only the cloth waves. */
.anfn-flag-anchor{pointer-events:none}
.anfn-flag-cloth{transform-box:fill-box;transform-origin:left center;animation:anfnFlagFly .64s cubic-bezier(.45,.05,.55,.95) infinite alternate;filter:drop-shadow(0 1px 1px rgba(1,31,61,.22))}
@keyframes anfnFlagFly{0%{transform:skewY(-6deg) scaleX(.90) translateX(0)}35%{transform:skewY(5deg) scaleX(1.08) translateX(2px)}68%{transform:skewY(-3deg) scaleX(.98) translateX(1px)}100%{transform:skewY(3deg) scaleX(1.05) translateX(3px)}}

/* Water is visibly displaced by the boat. */
.anfn-wake{opacity:.95;transform-origin:center;animation:anfnWakePulse 1.7s ease-in-out infinite alternate}
.anfn-bow-cut{opacity:.9;animation:anfnBowPulse 1.25s ease-in-out infinite alternate}
@keyframes anfnWakePulse{from{opacity:.60;transform:scaleX(.86) scaleY(.9)}to{opacity:1;transform:scaleX(1.08) scaleY(1.05)}}
@keyframes anfnBowPulse{from{opacity:.55;transform:scale(.92)}to{opacity:.95;transform:scale(1.08)}}

.anfn-sea-section.is-moving .anfn-wake{animation-duration:1.1s;opacity:1}
.anfn-sea-section.is-moving .anfn-bow-cut{animation-duration:.88s;opacity:.98}
.anfn-sea-section.is-stopped .anfn-wake{animation-duration:2.6s;opacity:.46}
.anfn-sea-section.is-stopped .anfn-bow-cut{animation-duration:1.8s;opacity:.48}
.anfn-sea-section.is-returning .anfn-flag-cloth{animation-direction:alternate-reverse}

/* NOW shape mode only. */
.anfn-host{position:relative!important;overflow:visible}
.anfn-stage{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s ease;contain:layout paint style}
.anfn-stage.is-visible{opacity:1}
.anfn-stage svg{display:block;width:100%;height:100%;overflow:visible}
.anfn-brand-only{position:absolute;inset:0;display:flex;align-items:center;gap:7px;opacity:0;pointer-events:none;transition:opacity .28s ease;white-space:nowrap}
.anfn-brand-only svg{width:78px;height:auto;flex:0 0 auto}
.anfn-brand-only strong{font:800 clamp(18px,2.2vw,32px)/1 Arial,Helvetica,sans-serif;letter-spacing:-.6px;color:#063b4c}
.anfn-active .an-logo-wrap .an-brand>img,.anfn-active .an-logo-wrap .an-brand-copy{opacity:0!important}
.anfn-active .an-logo-wrap .anfn-brand-only{opacity:1}
.an-logo-wrap .an-brand>img,.an-logo-wrap .an-brand-copy{transition:opacity .28s ease}
.anfn-mode-now_shape .anfn-stage{left:clamp(190px,31vw,360px);right:78px;top:50%;height:84px;transform:translateY(-50%)}

@media (max-width:760px){
  .anfn-sea-section{min-height:154px!important}
  .anfn-route-points{left:5px;right:5px;top:2px;gap:2px}
  .anfn-ferry-wrap{top:62%!important}
  .anfn-route-point{font-size:8.5px;line-height:1.02}
  .anfn-route-point small{font-size:7.5px}
  .anfn-arrival-note{top:34px;font-size:10px;padding:6px 10px;max-width:92vw}
  .anfn-route-progress{top:27px;height:3px}.anfn-route-progress span{height:3px}
  .anfn-route-point::after{width:5px;height:5px;border-width:1.5px;margin-top:2px}
  /* Same physical ferry dimensions as desktop: no percentage scale, no preserveAspectRatio distortion. */
  .anfn-ferry-wrap{width:286px!important;height:142px!important}
  .anfn-ferry-wrap svg{width:286px!important;height:142px!important}
}
@media (max-width:420px){
  .anfn-route-point{font-size:7.6px}
  .anfn-route-point small{font-size:6.9px}
  .anfn-mode-now_shape .anfn-stage{display:none!important}
  .anfn-mode-now_shape.anfn-active .an-logo-wrap .an-brand>img,.anfn-mode-now_shape.anfn-active .an-logo-wrap .an-brand-copy{opacity:1!important}
  .anfn-brand-only{display:none!important}
}
@media (prefers-reduced-motion:reduce){.anfn-stage,.anfn-sea-section{display:none!important}.anfn-brand-only{display:none!important}.anfn-ferry-name-animated .anfn-letter{animation:none!important;fill:#fff!important}.anfn-flag-cloth{animation:none!important}.anfn-arrival-note{display:none!important}}

.anfn-flag-mast{filter:drop-shadow(0 1px 1px rgba(1,31,61,.18))}

.anfn-mast-tip{filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 1px 2px rgba(3,61,88,.35))}


/* ===== Header wordmark animation: theme-v1.7 compatible, tiny inline SVG ===== */
.anfn-inline-logo{display:block;width:220px!important;height:auto!important;max-width:100%;overflow:visible;transform-origin:left center;will-change:transform,filter}
.anfn-inline-logo .anfn-logo-svg-word{transform-box:fill-box;transform-origin:center}
.anfn-inline-logo .anfn-logo-svg-letter{display:inline;transform-box:fill-box;transform-origin:center;will-change:transform,opacity,fill}
.anfn-logo-typing .anfn-logo-svg-letter{animation:anfnSvgType .82s both;animation-delay:calc(var(--i)*55ms)}
.anfn-logo-typing .is-now .anfn-logo-svg-letter{animation-delay:calc(360ms + var(--i)*75ms)}
@keyframes anfnSvgType{0%{opacity:0;transform:translateY(7px) scale(.78)}58%{opacity:1;transform:translateY(-1px) scale(1.05)}100%{opacity:1;transform:none}}
.anfn-logo-split .is-andaman{animation:anfnSvgSplitA 1.9s ease-in-out both}.anfn-logo-split .is-now{animation:anfnSvgSplitN 1.9s ease-in-out both}
@keyframes anfnSvgSplitA{0%,100%{transform:none}34%{transform:translateX(-7px)}66%{transform:translateX(2px)}}
@keyframes anfnSvgSplitN{0%,100%{transform:none}34%{transform:translateX(11px) rotate(2deg)}66%{transform:translateX(-2px)}}
.anfn-logo-color .anfn-logo-svg-letter{animation:anfnSvgColor 2.7s ease-in-out both;animation-delay:calc(var(--i)*72ms)}
@keyframes anfnSvgColor{0%,100%{fill:currentColor}18%{fill:#ff9933}38%{fill:#ff6b35}58%{fill:#16a34a}78%{fill:#9333ea}}
.anfn-logo-bounce .anfn-logo-svg-letter{animation:anfnSvgBounce 1.9s ease-in-out both;animation-delay:calc(var(--i)*52ms)}
@keyframes anfnSvgBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}52%{transform:translateY(2px)}73%{transform:translateY(-1px)}}
.anfn-logo-glow{animation:anfnSvgGlow 2.5s ease-in-out both}
@keyframes anfnSvgGlow{0%,100%{filter:none;transform:none}40%{filter:drop-shadow(0 0 6px rgba(255,153,51,.42)) drop-shadow(0 0 9px rgba(8,127,140,.22));transform:scale(1.025)}70%{filter:drop-shadow(0 0 5px rgba(255,107,53,.24));transform:scale(.998)}}
/* Fallback for a raster/custom logo: still visibly animates, without DOM duplication. */
.anfn-logo-image-fallback.anfn-logo-typing{animation:anfnRasterReveal 1.2s ease both}.anfn-logo-image-fallback.anfn-logo-split{animation:anfnRasterDrift 1.9s ease both}.anfn-logo-image-fallback.anfn-logo-color{animation:anfnRasterColor 2.5s ease both}.anfn-logo-image-fallback.anfn-logo-bounce{animation:anfnRasterBounce 1.9s ease both}.anfn-logo-image-fallback.anfn-logo-glow{animation:anfnSvgGlow 2.5s ease both}
@keyframes anfnRasterReveal{0%{opacity:.15;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0)}}
@keyframes anfnRasterDrift{0%,100%{transform:none}45%{transform:translateX(7px)}70%{transform:translateX(-2px)}}
@keyframes anfnRasterColor{0%,100%{filter:none}35%{filter:hue-rotate(18deg) saturate(1.25)}70%{filter:hue-rotate(-18deg) saturate(1.18)}}
@keyframes anfnRasterBounce{0%,100%{transform:none}35%{transform:translateY(-4px)}65%{transform:translateY(2px)}}
@media(max-width:640px){.anfn-inline-logo{width:190px!important}}

/* ===== Homepage hero: Sea. Islands. Adventure. ===== */
.anfn-home-title-fx .anfn-home-sea,.anfn-home-title-fx .anfn-home-islands,.anfn-home-title-fx .anfn-home-adventure{display:inline-block;will-change:transform,text-shadow,color}
.anfn-home-title-fx .anfn-home-sea{animation:anfnHeroSea 6.4s ease-in-out infinite}
.anfn-home-title-fx .anfn-home-islands{animation:anfnHeroIslands 6.4s ease-in-out infinite .35s}
.anfn-home-title-fx .anfn-home-adventure{color:var(--anfn-adventure,#ff6b35)!important;animation:anfnHeroAdventure 6.4s ease-in-out infinite .7s;text-shadow:0 3px 14px rgba(0,0,0,.12)}
@keyframes anfnHeroSea{0%,100%,18%{transform:none}8%{transform:translateY(-2px);text-shadow:0 5px 18px rgba(255,255,255,.12)}}
@keyframes anfnHeroIslands{0%,100%,22%{transform:none}10%{transform:translateY(-2px) scale(1.012)}}
@keyframes anfnHeroAdventure{0%,100%,30%{transform:none;text-shadow:none}12%{transform:translateY(-2px) scale(1.018);text-shadow:0 5px 20px rgba(255,107,53,.24)}}

@media (max-width:760px){
  .anfn-logo-bounce .anfn-logo-letter{animation-name:anfnLogoBounceMobile}
  @keyframes anfnLogoBounceMobile{0%,100%{transform:translateY(0)}35%{transform:translateY(-2px)}65%{transform:translateY(1px)}}
}
@media (prefers-reduced-motion:reduce){
  .anfn-inline-logo,.anfn-inline-logo *,.anfn-logo-image-fallback,.anfn-home-title-fx .anfn-home-sea,.anfn-home-title-fx .anfn-home-islands,.anfn-home-title-fx .anfn-home-adventure{animation:none!important;transform:none!important;text-shadow:none!important}
}


/* ===== v1.22.5 clear drawer collapse dock =====
   Icon semantics are deliberately literal:
   - sea OPEN: arrow points UP = tuck/hide the open sea drawer
   - sea COLLAPSED: arrow points DOWN = pull/show the sea drawer
   The button remains below the sea and never overlaps ferry/route content. */
.anfn-collapse-toggle{
  position:relative;z-index:20;display:grid;place-items:center;
  width:34px;height:20px;min-width:34px;min-height:20px;
  margin:-1px auto 0;padding:0;border:1px solid rgba(5,46,92,.20);border-top:0;
  border-radius:0 0 11px 11px;background:#fff;color:#087f8c;
  box-shadow:0 5px 12px rgba(5,46,92,.11);cursor:pointer;line-height:1;
}
.anfn-collapse-toggle:hover,.anfn-collapse-toggle:focus-visible{background:#f2fcff;color:#0b72e7;outline:2px solid rgba(11,114,231,.18);outline-offset:2px}
.anfn-toggle-icon{display:block;width:22px;height:17px;line-height:0}
.anfn-toggle-icon svg{display:block;width:22px;height:17px;overflow:visible}
.anfn-toggle-tray{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;opacity:.72}
.anfn-toggle-arrow{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transform-origin:12px 10px;transition:transform .18s ease}
/* OPEN sea = UP arrow means collapse/hide. */
.anfn-collapse-toggle:not(.is-collapsed) .anfn-toggle-arrow{transform:rotate(0deg)}
/* COLLAPSED sea = DOWN arrow means expand/show. */
.anfn-collapse-toggle.is-collapsed .anfn-toggle-arrow{transform:rotate(180deg)}
.anfn-sea-section.is-collapsed{height:var(--anfn-collapsed-height,36px)!important;min-height:var(--anfn-collapsed-height,36px)!important;background:linear-gradient(90deg,#dffaff,#bff5f7,#dffaff)}
.anfn-sea-section.is-collapsed .anfn-water-layer,.anfn-sea-section.is-collapsed .anfn-route-points,.anfn-sea-section.is-collapsed .anfn-route-progress,.anfn-sea-section.is-collapsed .anfn-arrival-note,.anfn-sea-section.is-collapsed .anfn-ferry-wrap{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
@media(max-width:760px){.anfn-sea-section.is-collapsed{height:var(--anfn-collapsed-height,36px)!important;min-height:var(--anfn-collapsed-height,36px)!important}.anfn-collapse-toggle{width:32px;height:19px;min-width:32px;min-height:19px}.anfn-toggle-icon,.anfn-toggle-icon svg{width:20px;height:16px}}
.anfn-sea-section.is-tab-hidden .anfn-water-surface,.anfn-sea-section.is-tab-hidden .anfn-wave-soft,.anfn-sea-section.is-tab-hidden .anfn-ripple-a,.anfn-sea-section.is-tab-hidden .anfn-ripple-b,.anfn-sea-section.is-tab-hidden .anfn-flag-cloth,.anfn-sea-section.is-tab-hidden .anfn-wake,.anfn-sea-section.is-tab-hidden .anfn-bow-cut{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.anfn-collapse-toggle{display:none!important}}


/* v1.22.6 integration/performance */
a.anfn-route-point{color:inherit;text-decoration:none}
.anfn-sea-section.is-runtime-paused .anfn-water-surface,.anfn-sea-section.is-runtime-paused .anfn-wave-soft,.anfn-sea-section.is-runtime-paused .anfn-ripple-a,.anfn-sea-section.is-runtime-paused .anfn-ripple-b,.anfn-sea-section.is-runtime-paused .anfn-flag-cloth,.anfn-sea-section.is-runtime-paused .anfn-wake,.anfn-sea-section.is-runtime-paused .anfn-bow-cut{animation-play-state:paused!important}
.anfn-collapse-toggle::before{content:"";position:absolute;inset:-12px -7px;z-index:-1}
