/* =============================================================================
   Hawaii Adventure Atlas 3D flyover
   Topographic Night modal chrome around the lazily mounted Mapbox GL scene.
   ============================================================================= */

body.flyover-open{overscroll-behavior:none}

.flyover{
  position:fixed;
  inset:0;
  z-index:4000;
  isolation:isolate;
  overflow:hidden;
  color:var(--text,#E2E4D6);
  background:#020607;
  font-family:var(--font,ui-monospace,monospace);
}

/* Mapbox GL's lazy stylesheet is inserted after this file. The two-class
   selector intentionally outranks its position:relative map rule. */
.flyover .flyover__map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(31,61,51,.34),transparent 58%),
    #020607;
}

.flyover__shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,6,7,.58) 0,rgba(2,6,7,.14) 15%,transparent 31%),
    linear-gradient(0deg,rgba(2,6,7,.7) 0,rgba(2,6,7,.1) 18%,transparent 34%),
    radial-gradient(ellipse at center,transparent 42%,rgba(1,4,5,.2) 78%,rgba(1,4,5,.5) 125%);
}

.flyover__head{
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:max(18px,env(safe-area-inset-top)) 20px 14px;
  pointer-events:none;
}

.flyover__identity{
  min-width:0;
  max-width:min(620px,calc(100vw - 96px));
  padding:13px 17px 12px;
  overflow:hidden;
  pointer-events:auto;
  border:1px solid var(--border-strong,#3A4830);
  border-radius:var(--r-lg,17px);
  background-color:rgba(3,7,7,.94);
  background-image:var(--surface-texture);
  background-size:100% 100%,100% 100%,560px auto;
  background-position:center,center,center;
  background-repeat:no-repeat;
  box-shadow:
    0 22px 56px rgba(0,0,0,.48),
    inset 0 1px rgba(255,255,255,.055),
    inset 0 0 24px color-mix(in srgb,var(--accent,#A8D76F) 4%,transparent);
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
}

.flyover__eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:5px;
  color:var(--accent,#A8D76F);
  font-size:8px;
  line-height:1;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.flyover__eyebrow>span{
  width:22px;
  height:1px;
  flex:none;
  background:currentColor;
  box-shadow:0 0 9px currentColor;
}

.flyover__titleText{
  overflow:hidden;
  color:var(--text,#E2E4D6);
  font-family:var(--font-display,var(--font,ui-monospace,monospace));
  font-size:24px;
  font-weight:400;
  line-height:1.12;
  letter-spacing:.055em;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}

.flyover__subtitle{
  margin-top:4px;
  overflow:hidden;
  color:var(--text-dim,#8A8F5C);
  font-size:9px;
  line-height:1.25;
  letter-spacing:.13em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.flyover__close{
  display:grid;
  width:50px;
  height:50px;
  flex:0 0 auto;
  place-items:center;
  pointer-events:auto;
  color:var(--text-dim,#8A8F5C);
  border:1px solid var(--border-strong,#3A4830);
  border-radius:14px;
  background-color:rgba(3,7,7,.96);
  background-image:var(--control-texture);
  background-size:100% 100%,260px auto;
  background-position:center;
  box-shadow:0 16px 38px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.055);
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.flyover__close svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
}

.flyover__close:hover{
  color:var(--accent,#A8D76F);
  border-color:var(--accent,#A8D76F);
  transform:translateY(-1px);
  box-shadow:
    0 18px 42px rgba(0,0,0,.54),
    0 0 18px color-mix(in srgb,var(--accent,#A8D76F) 10%,transparent),
    inset 0 0 20px color-mix(in srgb,var(--accent,#A8D76F) 7%,transparent);
}

.flyover__close:active{transform:translateY(1px)}

.flyover__foot{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  display:flex;
  width:min(720px,calc(100vw - 40px));
  min-height:62px;
  align-items:center;
  gap:14px;
  padding:9px 13px;
  border:1px solid var(--border-strong,#3A4830);
  border-radius:16px;
  background-color:rgba(3,7,7,.95);
  background-image:var(--control-texture);
  background-size:100% 100%,620px auto;
  background-position:center;
  box-shadow:
    0 22px 60px rgba(0,0,0,.58),
    inset 0 1px rgba(255,255,255,.055),
    inset 0 0 26px color-mix(in srgb,var(--accent,#A8D76F) 4%,transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transform:translateX(-50%);
}

.flyover__play{
  display:flex;
  min-width:108px;
  min-height:44px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  color:var(--accent,#A8D76F);
  border:1px solid color-mix(in srgb,var(--accent,#A8D76F) 68%,var(--border,#28301F));
  border-radius:10px;
  background:color-mix(in srgb,var(--accent,#A8D76F) 7%,rgba(3,7,7,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.045),inset 0 0 18px color-mix(in srgb,var(--accent,#A8D76F) 5%,transparent);
  font-family:var(--font-num,var(--font,ui-monospace,monospace));
  font-size:9px;
  letter-spacing:.14em;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.flyover__play svg{width:19px;height:19px;flex:none}
.flyover__play:hover:not(:disabled){
  border-color:var(--accent,#A8D76F);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 0 20px color-mix(in srgb,var(--accent,#A8D76F) 9%,transparent);
}
.flyover__play:active:not(:disabled){transform:translateY(1px)}
.flyover__play:disabled{cursor:wait;opacity:.42}

.flyover__timeline{
  position:relative;
  display:flex;
  min-width:0;
  flex:1 1 auto;
  align-items:center;
}

.flyover__timeline::after{
  content:"";
  position:absolute;
  z-index:0;
  left:2px;
  right:2px;
  top:50%;
  height:10px;
  opacity:.22;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--text-dim,#8A8F5C) calc(10% - 1px) 10%);
  transform:translateY(-50%);
}

.flyover__scrub{
  --flyover-progress:0%;
  width:100%;
  height:44px;
  margin:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  outline:0;
  background:transparent;
  accent-color:var(--accent,#A8D76F);
  cursor:pointer;
  position:relative;
  z-index:1;
}

.flyover__scrub:disabled{cursor:wait;opacity:.42}
.flyover__scrub::-webkit-slider-runnable-track{
  width:100%;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--accent,#A8D76F) 0 var(--flyover-progress),var(--border-strong,#3A4830) var(--flyover-progress) 100%);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent,#A8D76F) 8%,transparent);
}
.flyover__scrub::-webkit-slider-thumb{
  width:18px;
  height:18px;
  margin-top:-7.5px;
  appearance:none;
  -webkit-appearance:none;
  border:3px solid #07100B;
  border-radius:50%;
  background:var(--accent,#A8D76F);
  box-shadow:0 0 0 1px var(--accent,#A8D76F),0 0 14px color-mix(in srgb,var(--accent,#A8D76F) 48%,transparent);
}
.flyover__scrub::-moz-range-track{
  height:3px;
  border-radius:99px;
  background:var(--border-strong,#3A4830);
}
.flyover__scrub::-moz-range-progress{
  height:3px;
  border-radius:99px;
  background:var(--accent,#A8D76F);
}
.flyover__scrub::-moz-range-thumb{
  width:14px;
  height:14px;
  border:3px solid #07100B;
  border-radius:50%;
  background:var(--accent,#A8D76F);
  box-shadow:0 0 0 1px var(--accent,#A8D76F),0 0 14px color-mix(in srgb,var(--accent,#A8D76F) 48%,transparent);
}

.flyover__progress{
  width:42px;
  flex:0 0 auto;
  color:var(--text-dim,#8A8F5C);
  font-family:var(--font-num,var(--font,ui-monospace,monospace));
  font-size:9px;
  letter-spacing:.08em;
  text-align:right;
}

.flyover__foot--hint{
  width:auto;
  min-height:0;
  justify-content:center;
  padding:10px 15px;
  pointer-events:none;
}

.flyover__hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--text-dim,#8A8F5C);
  font-size:8.5px;
  line-height:1.35;
  letter-spacing:.11em;
  text-align:center;
}
.flyover__hint svg{
  width:19px;
  height:19px;
  flex:none;
  fill:none;
  stroke:var(--accent,#A8D76F);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.flyover__hint i{
  display:inline-block;
  width:3px;
  height:3px;
  margin:0 8px 2px;
  border-radius:50%;
  background:var(--accent,#A8D76F);
  box-shadow:0 0 7px var(--accent,#A8D76F);
}

.flyover__note{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  display:flex;
  width:min(430px,calc(100vw - 36px));
  min-height:64px;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 19px;
  color:var(--text,#E2E4D6);
  border:1px solid var(--border-strong,#3A4830);
  border-radius:15px;
  background-color:rgba(3,7,7,.97);
  background-image:var(--surface-texture);
  background-size:100% 100%,100% 100%,480px auto;
  background-position:center;
  box-shadow:0 24px 62px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.055);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.035em;
  text-align:left;
  transform:translate(-50%,-50%);
}
.flyover__note[hidden]{display:none}

.flyover__spinner{
  display:none;
  width:20px;
  height:20px;
  flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--accent,#A8D76F) 25%,transparent);
  border-top-color:var(--accent,#A8D76F);
  border-radius:50%;
  box-shadow:0 0 10px color-mix(in srgb,var(--accent,#A8D76F) 12%,transparent);
  animation:flyover-spin .85s linear infinite;
}
.flyover__note.is-loading .flyover__spinner{display:block}
@keyframes flyover-spin{to{transform:rotate(360deg)}}

/* Mapbox controls in explore mode. */
.flyover .mapboxgl-ctrl-top-left{top:108px;left:10px}
.flyover .mapboxgl-ctrl-bottom-right{right:8px;bottom:82px}
.flyover .mapboxgl-ctrl-group{
  overflow:hidden;
  border:1px solid var(--border-strong,#3A4830);
  border-radius:12px;
  background:rgba(3,7,7,.96);
  box-shadow:0 15px 36px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.045);
}
.flyover .mapboxgl-ctrl-group:not(:empty){box-shadow:0 15px 36px rgba(0,0,0,.48)}
.flyover .mapboxgl-ctrl-group button{
  width:48px;
  height:48px;
  color:var(--text,#E2E4D6);
  background-color:transparent;
  border-color:var(--border,#28301F);
}
.flyover .mapboxgl-ctrl-group button:hover{background-color:color-mix(in srgb,var(--accent,#A8D76F) 8%,#030707)}
.flyover .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{
  background-size:30px 30px;
  filter:invert(92%) sepia(8%) saturate(330%) hue-rotate(47deg) brightness(101%);
}
.flyover .mapboxgl-ctrl-attrib{
  color:#AAB3AC;
  background:rgba(2,6,7,.82);
  font-family:var(--font,ui-monospace,monospace);
  font-size:9px;
}
.flyover .mapboxgl-ctrl-attrib a{color:#AAB3AC}
.flyover .mapboxgl-ctrl-logo{opacity:.7}
.flyover .mapboxgl-ctrl-bottom-left{left:8px;bottom:82px}

/* Detail-panel and full-page launch controls. */
.flyover-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:9px 0 11px;
}

.flyover-btn{
  display:flex;
  min-width:0;
  min-height:43px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 11px;
  color:var(--accent,#A8D76F);
  border:1px solid color-mix(in srgb,var(--accent,#A8D76F) 68%,var(--border,#28301F));
  border-radius:10px;
  background-color:rgba(3,7,7,.97);
  background-image:var(--control-texture);
  background-size:100% 100%,320px auto;
  background-position:center;
  box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.045),inset 0 0 18px color-mix(in srgb,var(--accent,#A8D76F) 5%,transparent);
  font-family:var(--font-num,var(--font,ui-monospace,monospace));
  font-size:9px;
  line-height:1.25;
  letter-spacing:.085em;
  text-align:center;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.flyover-btn:hover{
  color:var(--text,#E2E4D6);
  border-color:var(--accent,#A8D76F);
  transform:translateY(-1px);
  box-shadow:0 12px 25px rgba(0,0,0,.4),0 0 18px color-mix(in srgb,var(--accent,#A8D76F) 10%,transparent),inset 0 0 22px color-mix(in srgb,var(--accent,#A8D76F) 8%,transparent);
}
.flyover-btn:active{transform:translateY(1px)}
.flyover-btn--explore{
  color:var(--text-dim,#8A8F5C);
  border-color:var(--border-strong,#3A4830);
}
.flyover-btn--explore:hover{color:var(--accent,#A8D76F)}

/* Rich V7 launch rows used by both the slide-over and the full detail page. */
.flyoverLaunch .flyover-btn{min-height:54px}
.flyoverLaunch__primary{justify-content:flex-start;text-align:left}
.flyoverLaunch__glyph{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid color-mix(in srgb,var(--accent,#A8D76F) 45%,transparent);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent,#A8D76F) 7%,transparent);
}
.flyoverLaunch__glyph svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.flyoverLaunch__copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.flyoverLaunch__copy b{font-weight:400}
.flyoverLaunch__copy small{
  overflow:hidden;
  color:var(--text-dim,#8A8F5C);
  font-family:var(--font,ui-monospace,monospace);
  font-size:7px;
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.flyoverLaunch__arrow{flex:none;font:20px/1 var(--font,ui-monospace,monospace);opacity:.7}
.flyoverLaunch__explore span{font:17px/1 var(--font,ui-monospace,monospace)}
.flyoverLaunch__explore b{font-weight:400}
.flyoverLaunch--compact{grid-template-columns:1fr}

@media (max-width:700px){
  .flyover__head{
    gap:9px;
    padding:max(10px,env(safe-area-inset-top)) 10px 10px;
  }
  .flyover__identity{
    max-width:calc(100vw - 72px);
    padding:10px 13px 9px;
    border-radius:13px;
  }
  .flyover__eyebrow{margin-bottom:4px;font-size:7px;letter-spacing:.17em}
  .flyover__eyebrow>span{width:14px}
  .flyover__titleText{font-size:19px}
  .flyover__subtitle{font-size:7.5px;letter-spacing:.1em}
  .flyover__close{width:50px;height:50px;border-radius:13px}
  .flyover__foot{
    bottom:max(10px,env(safe-area-inset-bottom));
    width:calc(100vw - 20px);
    min-height:58px;
    gap:9px;
    padding:7px 9px;
    border-radius:14px;
  }
  .flyover__play{min-width:48px;width:48px;min-height:44px;padding:0}
  .flyover__playText{display:none}
  .flyover__progress{width:36px;font-size:8px}
  .flyover__foot--hint{width:calc(100vw - 20px);padding:10px 12px}
  .flyover__hint{gap:8px;font-size:7.5px;letter-spacing:.075em}
  .flyover__hint svg{width:17px;height:17px}
  .flyover__hint i{margin:0 4px 2px}
  .flyover .mapboxgl-ctrl-top-left{top:91px;left:0}
  .flyover .mapboxgl-ctrl-bottom-left{left:2px;bottom:72px}
  .flyover .mapboxgl-ctrl-bottom-right{right:2px;bottom:72px}
  .flyover .mapboxgl-ctrl-group button{width:46px;height:46px}
}

@media (max-width:420px){
  .flyover__hint svg{display:none}
  .flyover__hint i{margin:0 3px 2px}
  .flyover-row{grid-template-columns:1fr}
}

@media (max-height:500px) and (orientation:landscape){
  .flyover__head{padding-top:max(8px,env(safe-area-inset-top))}
  .flyover__identity{padding:8px 12px}
  .flyover__eyebrow{display:none}
  .flyover__titleText{font-size:18px}
  .flyover__subtitle{margin-top:2px}
  .flyover__close{width:44px;height:44px}
  .flyover__foot{bottom:max(7px,env(safe-area-inset-bottom));min-height:52px}
  .flyover .mapboxgl-ctrl-top-left{top:68px}
}

@media (prefers-reduced-motion:reduce){
  .flyover__close,.flyover__play,.flyover-btn{transition:none}
  .flyover__spinner{animation-duration:1.6s}
}

@media (prefers-contrast:more){
  .flyover__identity,.flyover__foot,.flyover__note,.flyover__close,.flyover-btn{
    background-image:none;
    background-color:#020607;
    border-color:var(--accent,#A8D76F);
  }
}