* { box-sizing: border-box; }
:root { color-scheme: light; --ink: #050c37; --blue: #0064ff; --muted: #7888b3; }
html, body { margin: 0; min-width: 280px; min-height: 100%; }
body { font-family: Inter, Arial, Helvetica, sans-serif; background: #eaf4fd; color: var(--ink); }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.site { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 50% 12%, #cbdfee 0%, #e3eff9 25%, #f4faff 58%, #d6edff 100%); }
.scene { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 1.2s ease-out, transform 2.4s cubic-bezier(.22,.61,.36,1); }
/* Entrance: fade in while pulling back from a close-up (near → far). */
.js .scene:not(.is-ready) { opacity: 0; transform: scale(1.15); }
/* Caption entrance: title rises out of a clip line and sharpens, subtitle follows. */
.js .logo { animation: logo-fade 1.2s ease-out backwards; }
@keyframes logo-fade { from { opacity: 0; } to { opacity: 1; } }
.js h1 { animation: caption-rise 1s cubic-bezier(.22,.61,.36,1) .3s backwards; }
.js .subtitle { animation: caption-fade 1s ease-out .9s backwards; }
/* Cards rise in one after another; `backwards` (not `both`) so the hover lift still works once the entrance ends.
   Scoped to :not(.is-entered) — JS sets it on first click so swapping to the tap animation can't replay the entrance. */
.js .site:not(.is-entered) .country { animation: card-rise .8s cubic-bezier(.22,.61,.36,1) .6s backwards; }
.js .site:not(.is-entered) .country + .country { animation-delay: .75s; }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(36px) scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
/* Social icons pop in one by one with a small bounce. */
.js .socials li { animation: icon-pop .5s ease-out 1.1s backwards; }
.js .socials li:nth-child(2) { animation-delay: 1.18s; }
.js .socials li:nth-child(3) { animation-delay: 1.26s; }
.js .socials li:nth-child(4) { animation-delay: 1.34s; }
@keyframes icon-pop {
  0% { opacity: 0; transform: translateY(14px) scale(.3); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.18); }
  75% { transform: translateY(0) scale(.94); }
  100% { opacity: 1; transform: none; }
}
@keyframes caption-rise {
  from { opacity: 0; transform: translateY(40%); clip-path: inset(0 0 100% 0); filter: blur(6px); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); filter: blur(0); }
}
@keyframes caption-fade {
  from { opacity: 0; transform: translateY(10px); letter-spacing: 2px; filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.brand { display: flex; justify-content: center; padding-top: clamp(40px, 8vh, 88px); }
.logo { display: block; width: clamp(220px, 20vw, 320px); height: auto; }
.chooser { position: relative; max-width: 1080px; margin: clamp(20px, 4vh, 40px) auto 0; padding: 0 32px; text-align: center; }
h1 { margin: 0; font-size: clamp(34px, 3vw, 46px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.12; }
.subtitle { margin: 8px 0 0; color: var(--muted); font-size: clamp(17px, 1.45vw, 23px); font-weight: 600; line-height: 1.45; letter-spacing: -.5px; }
.countries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 34px 0 0; }
.country { position: relative; display: block; width: 100%; min-width: 0; padding: 17px 12px; border: 1.5px solid #50bcff; border-radius: 25px; color: var(--ink); background: linear-gradient(150deg, rgba(255,255,255,.77), rgba(231,245,255,.66) 56%, rgba(255,255,255,.88)); box-shadow: 0 10px 22px rgba(30,122,212,.12), inset 0 1px 0 rgba(255,255,255,.95); cursor: pointer; text-align: left; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.country:hover { transform: translateY(-3px); border-color: #0064ff; box-shadow: 0 15px 28px rgba(30,122,212,.17), inset 0 1px 0 #fff; }
.country:focus-visible { outline: 3px solid #0064ff; outline-offset: 5px; }
.country[aria-pressed="true"] { border-color: #0064ff; box-shadow: 0 0 0 3px rgba(0,100,255,.14), 0 12px 24px rgba(30,122,212,.15); }
/* Fade all four edges (two gradients intersected) and multiply so the image's pale backdrop melts into the card. */
.landmark { display: block; width: auto; max-width: 100%; margin: 0 auto; height: 205px; object-fit: contain; opacity: .8; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 85%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 85%, transparent 100%); mask-composite: intersect; }
.country-row { display: flex; gap: 18px; align-items: center; min-height: 87px; padding: 0 38px; }
.flag { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 50%; box-shadow: 0 2px 3px rgba(34,70,108,.12); }
.country-name { flex: 1; min-width: 0; font-size: clamp(27px, 2.1vw, 34px); font-weight: 800; letter-spacing: -1.2px; }
.arrow { flex: 0 0 58px; width: 58px; height: 58px; }
.socials { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; margin: clamp(64px, 12vh, 140px) auto 100px; padding: 0; list-style: none; }
.social { display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; padding: 7px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.social img { display: block; width: 32px; height: 32px; }
/* Social icons: lift + glow on hover, squeeze on press, ripple ring on click (is-tapped set by JS). */
.social { position: relative; transition: transform .25s cubic-bezier(.3,1.6,.5,1), background-color .2s ease, box-shadow .2s ease; }
.social img { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
@media (hover: hover) {
  .social:hover { transform: translateY(-4px); background: rgba(255,255,255,.85); box-shadow: 0 8px 18px rgba(30,122,212,.22), 0 0 0 1px rgba(80,188,255,.35); }
  .social:hover img { transform: scale(1.12) rotate(-6deg); }
}
.social:active { transform: translateY(0) scale(.86); transition-duration: .08s; }
.social::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #50bcff; opacity: 0; pointer-events: none; }
.social.is-tapped::after { animation: social-ripple .5s ease-out; }
@keyframes social-ripple { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.social:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Card tap on click (class added by JS): quick press + glow flash. */
.js .country.is-hit { animation: card-tap .12s ease-out; }
@keyframes card-tap {
  0% { transform: scale(1); }
  40% { transform: scale(.95); filter: brightness(1.12); box-shadow: 0 0 0 4px rgba(80,188,255,.45), 0 0 28px rgba(80,188,255,.6); }
  100% { transform: scale(1); filter: none; }
}
/* Select sequence (classes added by JS): everything else fades, the chosen card glides to centre, then fades while the whole background zooms in. */
.country.is-chosen { z-index: 5; will-change: transform; transition: transform .8s cubic-bezier(.45,.05,.25,1), opacity .45s ease-in; }
.site.is-focusing .brand, .site.is-focusing h1, .site.is-focusing .subtitle, .site.is-focusing .socials, .site.is-focusing .portal-desc, .site.is-focusing .country:not(.is-chosen) { opacity: 0; pointer-events: none; }
.brand, h1, .subtitle, .socials, .portal-desc, .country:not(.is-chosen) { transition: opacity .6s ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.site.is-card-out .country.is-chosen { opacity: 0; transition: transform 1.2s cubic-bezier(.55,0,.45,1), opacity 1.2s cubic-bezier(.55,0,.45,1); }
.site.is-diving .scene { transform: scale(2.5); transition: transform 1.2s cubic-bezier(.55,0,.45,1); }
/* "Redirecting..." label: pinned to the bottom centre of the screen. */
.redirecting { position: fixed; z-index: 6; left: 0; right: 0; bottom: calc(48px + env(safe-area-inset-bottom)); text-align: center; color: var(--blue); font-size: 16px; font-weight: 700; letter-spacing: 1px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.site.is-focusing .redirecting { opacity: 1; animation: redirect-blink .9s ease-in-out .3s infinite; }
.site.is-card-out .redirecting { opacity: 0; animation: none; transition: opacity .5s ease; }
@keyframes redirect-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
/* White-out at the end of the dive: covers the hand-off to the next page. */
.white-out { position: fixed; inset: 0; z-index: 100; background: #fff; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.site.is-whiteout .white-out { opacity: 1; transition: opacity .9s cubic-bezier(.4,0,.6,1) .5s; }
/* Small grey portal description pinned to the very bottom of the page (carried over from the previous portal for SEO).
   .socials keeps enough bottom margin that the two never overlap. */
.portal-desc { position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 680px; margin: 0 auto; padding: 0 24px; color: #8f9bb8; font-size: 11px; line-height: 1.6; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.scene-mobile { display: none; }
@media (min-width: 801px) and (max-width: 1100px) {
  .chooser { max-width: 950px; }
  .country-row { padding: 0 14px; gap: 12px; }
  .flag { width: 58px; height: 58px; flex-basis: 58px; }
  .arrow { width: 48px; height: 48px; flex-basis: 48px; }
  .country-name { font-size: 27px; }
  .landmark { height: 178px; }
}
@media (max-width: 800px) {
  .site { min-height: max(100svh, 844px); background: radial-gradient(ellipse at 50% 28%, #f6fbff, #e6f3ff 64%, #d6edff); }
  .scene-desktop { display: none; }
  .scene-mobile { display: block; }
  .scene { min-height: 844px; }
  .brand { height: 57px; padding: 9px 0 8px; align-items: center; background: rgba(250,253,255,.9); border-radius: 0 0 14px 14px; box-shadow: 0 4px 16px rgba(30,122,212,.10); }
  .logo { width: 188px; }
  .chooser { max-width: 460px; margin: 0 auto; padding: 120px 26px 0; }
  h1 { font-size: clamp(22px, 6.65vw, 29px); line-height: 1.15; letter-spacing: -1px; white-space: nowrap; }
  .subtitle { margin-top: 5px; font-size: 14px; line-height: 1.4; letter-spacing: -.55px; white-space: nowrap; }
  .countries { grid-template-columns: 1fr; gap: 13px; margin-top: 43px; }
  .country { padding: 10px 8px; border-radius: 18px; }
  .landmark { width: 100%; height: auto; }
  .country-row { gap: 15px; min-height: 52px; padding: 0 14px; }
  .flag { width: 48px; height: 48px; flex-basis: 48px; }
  .country-name { font-size: 22px; letter-spacing: -.8px; }
  .arrow { width: 46px; height: 46px; flex-basis: 46px; }
  .socials { gap: 0; margin: 24px auto 130px; }
  .portal-desc { max-width: 320px; font-size: 10px; }
  .social { width: 44px; height: 44px; padding: 9px; }
  .social img { width: 26px; height: 26px; }
}
/* Desktop browser preview of the supplied mobile design. */
body.preview-mobile { background: #dceafa; }
body.preview-mobile .site { width: min(100%, 390px); min-height: max(100svh, 844px); margin: 0 auto; background: radial-gradient(ellipse at 50% 28%, #f6fbff, #e6f3ff 64%, #d6edff); }
body.preview-mobile .scene-desktop { display: none; }
body.preview-mobile .scene-mobile { display: block; }
body.preview-mobile .scene { min-height: 844px; }
body.preview-mobile .brand { height: 57px; padding: 9px 0 8px; align-items: center; background: rgba(250,253,255,.9); border-radius: 0 0 14px 14px; box-shadow: 0 4px 16px rgba(30,122,212,.10); }
body.preview-mobile .logo { width: 188px; }
body.preview-mobile .chooser { max-width: 390px; margin: 0 auto; padding: 120px 26px 0; }
body.preview-mobile h1 { font-size: 26px; line-height: 1.15; letter-spacing: -1px; white-space: nowrap; }
body.preview-mobile .subtitle { margin-top: 5px; font-size: 14px; line-height: 1.4; letter-spacing: -.55px; white-space: nowrap; }
body.preview-mobile .countries { grid-template-columns: 1fr; gap: 13px; margin-top: 43px; }
body.preview-mobile .country { padding: 10px 8px; border-radius: 18px; }
body.preview-mobile .landmark { width: 100%; height: auto; }
body.preview-mobile .country-row { gap: 15px; min-height: 52px; padding: 0 14px; }
body.preview-mobile .flag { width: 48px; height: 48px; flex-basis: 48px; }
body.preview-mobile .country-name { font-size: 22px; letter-spacing: -.8px; }
body.preview-mobile .arrow { width: 46px; height: 46px; flex-basis: 46px; }
body.preview-mobile .socials { gap: 0; margin: 24px auto 130px; }
body.preview-mobile .portal-desc { max-width: 320px; font-size: 10px; }
body.preview-mobile .social { width: 44px; height: 44px; padding: 9px; }
body.preview-mobile .social img { width: 26px; height: 26px; }
@media (max-width: 350px) {
  .chooser, body.preview-mobile .chooser { padding-left: 18px; padding-right: 18px; }
  h1, body.preview-mobile h1 { font-size: 22px; }
  .subtitle, body.preview-mobile .subtitle { font-size: 12px; }
  .country-row, body.preview-mobile .country-row { gap: 9px; padding: 0 10px; }
  .flag, body.preview-mobile .flag { width: 40px; height: 40px; flex-basis: 40px; }
  .country-name, body.preview-mobile .country-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .scene, .country, .social, .social img { transition: none; } .social.is-tapped::after { animation: none; } .site.is-focusing .redirecting { animation: none; } .js .logo, .js h1, .js .subtitle, .js .site:not(.is-entered) .country, .js .socials li { animation: none; } .country:hover { transform: none; } }