/* Continuous STRAT night photo, with independent HTML portal cards. */
html, body, .screen { background: #080b14; }
/* 100vh is the fallback for iOS releases predating dynamic viewport units. */
.screen { height: 100vh; height: 100dvh; }
.city-fallback, .city-motion, .readability-shade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.city-fallback { object-fit: fill; z-index: 0; }
.city-motion { z-index: 2; }
.readability-shade {
  z-index: 3;
  background: linear-gradient(180deg, rgba(2,3,10,.12), transparent 15%,
    rgba(5,2,7,.26) 20%, rgba(5,2,7,.36) 30%, transparent 36%,
    rgba(4,1,5,.48) 34.4%, rgba(4,1,5,.25) 41.4%, transparent 44.4%,
    transparent 76.4%, rgba(3,1,6,.8) 84.4%, rgba(3,1,6,.65));
}
.brand-mark { filter: drop-shadow(0 3px 6px #050208); }
.brand-mark b {
  background-image: linear-gradient(180deg, #fff2ee 0%, #ff847b 25%, #ff242c 55%, #a4000c 100%);
  filter: drop-shadow(0 1px 0 #ffc9c4) drop-shadow(0 3px 5px #170005);
}
.map-title { z-index: 6; }
.map-title::before {
  inset: -14px -20px -16px;
  background: radial-gradient(ellipse, rgba(7,3,12,.86), rgba(13,3,10,.56) 55%, transparent 75%);
}
.map-title span { text-shadow: 0 2px 3px #0c0106, 0 0 15px #180109; }
.entry-cta { z-index: 6; text-shadow: 0 2px 4px #050107, 0 0 14px #050107; }
.portal {
  background: linear-gradient(115deg, rgba(45,2,8,.94), rgba(19,1,5,.88) 52%, rgba(66,2,10,.92));
  border: 1.5px solid #ff4b59;
  box-shadow: inset 0 0 0 1px rgba(255,195,174,.18), inset 0 0 24px rgba(150,5,20,.22), 0 0 5px #ff233b, 0 0 18px rgba(243,20,45,.35);
  overflow: hidden;
}
.portal::before { animation-duration: 4.8s; }
.portal::after {
  position: absolute; inset: 0; content: ""; border-radius: 20px;
  border: 1px solid rgba(255,53,59,.58);
  box-shadow: inset 0 0 16px rgba(255,12,25,.09), 0 0 11px rgba(255,14,32,.2);
  animation: ruby-frame 4.8s ease-in-out infinite;
  pointer-events: none;
}
.portal-two::after { animation-delay: 2.4s; }
.portal-label { text-shadow: 0 2px 3px #140004, 0 0 10px #140004; }
.portal:focus-visible { box-shadow: 0 0 0 3px #ffe6d2, 0 0 25px #ed1118; }
.security-note {
  z-index: 6; border-color: rgba(255,76,78,.95);
  background: linear-gradient(100deg, rgba(35,0,6,.94), rgba(100,4,12,.9), rgba(35,0,6,.94));
  box-shadow: inset 0 0 12px rgba(255,86,89,.1), 0 0 18px rgba(237,17,24,.22);
}
.contact-info { z-index: 6; text-shadow: 0 1px 4px #000, 0 0 9px #000; }
.flag-glint { z-index: 4; top: 2.5%; right: 4%; width: 12.8%; height: 4.5%; }
@keyframes ruby-frame {
  0%, 100% { border-color: rgba(255,53,59,.5); filter: brightness(1); }
  50% { border-color: rgba(255,155,145,.9); filter: brightness(1.3); }
}


/* Move the marked content group up by 5.6% of the screen height. */
.entry-cta { top: 35.4%; }
.portal-one { top: 44.9%; }
.portal-two { top: 61.3%; }
.security-note { bottom: 18.6%; }
@media (max-height: 720px) {
  .entry-cta { top: 35%; }
  .security-note { bottom: 18.1%; }
}

/* Compact portal cards and a protected footer inside the visible viewport. */
.portal { left: 13%; width: 74%; height: 11.5%; border-radius: 17px; }
.portal::after { border-radius: 17px; }
.portal-one { top: 44.9%; }
.portal-two { top: 58.6%; }
.security-note { bottom: 23%; width: min(76%, 400px); }
.contact-info {
  top: auto; bottom: max(10%, calc(env(safe-area-inset-bottom, 0px) + 24px));
  width: min(86%, 460px); line-height: 1.4;
}
.cta-secondary { font-size: clamp(11px, 2.9vw, 15px); letter-spacing: .025em; }
.cta-arrow { height: 20px; margin-top: 1px; width: 24px; }
.cta-arrow i { width: 12px; height: 12px; border-width: 2.5px; margin-top: -6px; }
@media (max-height: 720px) {
  .security-note { bottom: 23%; }
  .contact-info { top: auto; bottom: max(10%, calc(env(safe-area-inset-bottom, 0px) + 24px)); }
}
@media (max-height: 600px) {
  .brand-mark { top: 3.8%; }
  .brand-mark b { font-size: clamp(42px, 12vw, 64px); }
  .brand-mark small { margin-top: 5px; font-size: clamp(9px, 2.6vw, 12px); }
  .map-title { top: 20.3%; gap: 6px; padding: 2px 0 4px; }
  .map-title span { font-size: clamp(25px, 7.4vw, 32px); }
  .map-title span:last-child { font-size: clamp(20px, 5.7vw, 26px); }
  .entry-cta { top: 34.4%; gap: 2px; }
  .cta-primary { font-size: clamp(11.5px, 3.5vw, 15px); letter-spacing: .04em; }
  .cta-secondary { font-size: clamp(10px, 2.7vw, 12px); letter-spacing: .015em; }
  .cta-arrow { height: 18px; margin-top: 2px; width: 20px; }
  .cta-arrow i { width: 10px; height: 10px; border-width: 2px; margin-top: -6px; }
  .portal-label { gap: 4px; font-size: clamp(13px, 3.7vw, 20px); }
  .security-note { padding-top: 5px; padding-bottom: 5px; font-size: clamp(9px, 2.6vw, 12px); }
}

@media (min-width: 600px) and (max-height: 760px) {
  .map-title { top: 20.3%; gap: 8px; padding: 2px 0 4px; }
  .map-title span { font-size: 40px; }
  .map-title span:last-child { font-size: 32px; }
  .entry-cta { top: 34.5%; }
  .cta-arrow { height: 18px; }
}

/* One complete Vietnamese font for every character in both portal cards. */
@font-face {
  font-family: "MB66PortalBold";
  src: url("mb66-portal-vietnamese-bold-v1.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.portal-label, .portal-label small, .portal-label strong {
  font-family: "MB66PortalBold", Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-synthesis: none;
}


/* Cool ice-blue chevrons contrast with the warm gold city and red portals. */
.cta-arrow i {
  border-right-color: #87f3ff;
  border-bottom-color: #87f3ff;
  filter: drop-shadow(0 1px 1px #02050c) drop-shadow(0 0 5px rgba(38,218,255,.95));
}
.cta-arrow i:first-child, .cta-arrow i:nth-child(2) { opacity: 1; }


/* Three ice-blue arrow groups in one horizontal row. */
.cta-arrows {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(20px, 4vw, 32px);
}
.cta-arrow:nth-child(2) { animation-delay: .18s; }
.cta-arrow:nth-child(3) { animation-delay: .36s; }

/* Enlarge only the main line in each card, with room for Vietnamese accents. */
.portal-label { inset: 0 4%; }
.portal-label strong {
  font-size: clamp(14px, 4.2vw, 26px);
  letter-spacing: .005em; white-space: nowrap;
}
@media (max-height: 600px) {
  .portal-label strong { font-size: clamp(13.5px, 4vw, 22px); }
}


/* Native iPhone renderer: SVG light paths and CSS opacity, no Canvas loop. */
.city-native { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.city-native svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.city-native .native-beacon-gentle { display: none; }
.city-native .native-car { opacity: .8; }
.city-running .city-native { visibility: hidden; }
/* CSS also identifies iPhone/iPad if a browser masks its user-agent string. */
@supports (-webkit-touch-callout: none) {
  .city-motion { display: none; }
  .city-running .city-native { visibility: visible; }
}