:root {
  --navy: #071b3b;
  --teal: #00aaa9;
  --cyan: #05c7c7;
  --orange: #ff8c22;
  --red: #ef3935;
  --line: #0eb5b4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--navy);
  background: #fbfcfd;
  font-family: "Manrope", sans-serif;
  overflow: hidden;
}

.redirect-page { min-height: 100vh; overflow: hidden; position: relative; isolation: isolate; }
.redirect-page::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 52% 31%, #fff 0 22%, #f7fafc 68%, #f4f8fa); }
.wash { position: absolute; z-index: -1; pointer-events: none; opacity: .45; }
.wash-left { left: -8vw; bottom: -12vh; width: 40vw; height: 30vh; background: linear-gradient(28deg, #62dedc, #dff9f8); border-radius: 55% 70% 0 0; transform: rotate(17deg); }
.wash-right { right: -6vw; bottom: -13vh; width: 32vw; height: 22vh; background: linear-gradient(140deg, #fff2e8, #ffd3b7); border-radius: 70% 40% 0 0; transform: rotate(-17deg); }

.brand { position: absolute; left: 5.2vw; top: 4.5vh; width: 40px; height: 65px; overflow: visible; }
.brand img { position: absolute; top: -55px; left: -7px; width: 180px; max-width: none; height: auto; }

.hero { width: min(1440px, 100%); height: 100vh; margin: 0 auto; padding: 15vh 4vw 5vh; text-align: center; }
h1 { margin: 0 auto; position: relative; z-index: 3; font: 800 clamp(2.2rem, 5vw, 4.8rem)/1 "Sora", sans-serif; letter-spacing: -4px; }
h1 strong { color: var(--teal); }

.flight-stage { height: min(33vh, 390px); min-height: 250px; margin: 1vh auto 1vh; position: relative; max-width: 1400px; }
.route-line { position: absolute; left: 28%; top: 37%; width: 37%; height: 30%; z-index: 1; }
.route-line svg { width: 100%; height: 100%; overflow: visible; }
.route-domain { font: 800 38px "Manrope", sans-serif; letter-spacing: .45px; }
.route-domain-old { fill: var(--navy); animation: old-domain-transform 5s ease-in-out forwards; }
.route-domain-new { fill: #087f86; animation: new-domain-transform 5s ease-in-out forwards; }

.plane-flight { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.plane-motion { --plane-size: clamp(340px, 45vw, 610px); position: absolute; top: 0; left: 50%; width: var(--plane-size); height: clamp(184px, 24.3vw, 330px); will-change: transform, opacity; }
.plane-cutout { position: relative; width: 100%; height: 100%; overflow: visible; transform-origin: 58% 54%; transform-style: preserve-3d; animation: plane-airflow 5s linear forwards; }
.plane-image { position: absolute; top: clamp(-189px, -13.1vw, -102px); left: -2%; width: 100%; max-width: none; filter: drop-shadow(0 17px 13px rgba(31, 52, 78, .16)); }
.plane-mono { z-index: 1; will-change: clip-path; }
.plane-colour { z-index: 0; top: clamp(-180px, -12.5vw, -97px); left: -2.7%; opacity: 1; will-change: clip-path; }
.plane-art { animation: plane-float 2.5s ease-in-out infinite alternate; }
.travelling-plane { animation: plane-travel 5s cubic-bezier(.45,.02,.18,1) infinite; }
.color-reveal { transform-box: fill-box; transform-origin: right center; animation: colour-reveal 5s ease-out infinite; }
.plane-fold-line { stroke: #718091; stroke-width: 2; opacity: .48; }
.old-domain { fill: var(--navy); font: 800 30px "Manrope", sans-serif; letter-spacing: -.8px; animation: old-domain-out 5s ease infinite; }
.plane-old-label { display: none; }
.destination-label { filter: drop-shadow(0 0 20px #4fe6e66b); opacity: 0; animation: destination-in 5s ease infinite; }
.new-domain { fill: #0b6b7a; font: 800 26px "Manrope", sans-serif; letter-spacing: -.8px; }
.plane-sparks { overflow: visible; stroke: var(--teal); stroke-width: 6; stroke-linecap: round; }
.plane-sparks path:nth-child(2) { stroke: var(--orange); }
.plane-sparks path:nth-child(3) { stroke: var(--teal); }

.message { position: relative; z-index: 3; margin: 0 auto; font-size: clamp(1rem, 1.7vw, 1.45rem); line-height: 1.55; color: #173b76; }
.countdown { width: 155px; height: 155px; margin: 2.6vh auto 0; position: relative; }
.countdown svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown circle { fill: none; stroke-width: 7; }
.countdown-track { stroke: #cce0e9; }
.countdown-progress { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 270; stroke-dashoffset: 0; animation: countdown 5s linear infinite; }
.countdown-copy { position: absolute; inset: 0; display: grid; place-content: center; }
.countdown-copy strong { font: 800 3rem/1 "Sora", sans-serif; }
.countdown-copy span { font-size: 1rem; }
.continue-link { display: inline-block; margin-top: 18px; color: #087f86; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.continue-link span { display: inline-grid; width: 1.5em; height: 1.5em; margin-left: 7px; place-items: center; border-radius: 50%; color: #fff; background: #087f86; font-size: .78em; line-height: 1; text-decoration: none; vertical-align: middle; transition: transform .2s ease, background-color .2s ease; }
.continue-link:hover { text-decoration: underline; }
.continue-link:hover span { background: var(--navy); transform: translate(2px, -2px); }

@keyframes plane-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes plane-journey {
  0% { opacity: 0; transform: translate3d(calc(-50% - 62vw), 112px, 0) rotate(-12deg); }
  7% { opacity: 1; transform: translate3d(calc(-50% - 55vw), 96px, 0) rotate(-10deg); }
  15% { transform: translate3d(calc(-50% - 44vw), 65px, 0) rotate(-9deg); }
  23% { transform: translate3d(calc(-50% - 33vw), 39px, 0) rotate(-7deg); }
  31% { transform: translate3d(calc(-50% - 22vw), 26px, 0) rotate(-4deg); }
  36% { transform: translate3d(calc(-50% - 16vw), 27px, 0) rotate(-2deg); }
  43% { transform: translate3d(calc(-50% - 7vw), 42px, 0) rotate(2deg); }
  50% { transform: translate3d(-50%, 65px, 0) rotate(5deg); }
  57% { transform: translate3d(calc(-50% + 11vw), 78px, 0) rotate(7deg); }
  65% { transform: translate3d(calc(-50% + 22vw), 80px, 0) rotate(8deg); }
  73% { transform: translate3d(calc(-50% + 34vw), 72px, 0) rotate(5deg); }
  80% { transform: translate3d(calc(-50% + 45vw), 55px, 0) rotate(2deg); }
  86% { transform: translate3d(calc(-50% + 54vw), 36px, 0) rotate(-2deg); }
  91% { transform: translate3d(calc(-50% + 62vw), 18px, 0) rotate(-5deg); }
  96% { opacity: 1; transform: translate3d(calc(-50% + 69vw), -2px, 0) rotate(-6deg); }
  100% { opacity: 0; transform: translate3d(calc(-50% + 76vw), -18px, 0) rotate(-8deg); }
}
@keyframes plane-airflow {
  0%, 100% { transform: perspective(900px) translate3d(0, 0, 0) rotateZ(-7deg) rotateY(-2deg); }
  15% { transform: perspective(900px) translate3d(0, -10px, 0) rotateZ(-14deg) rotateY(-6deg); }
  32% { transform: perspective(900px) translate3d(0, -24px, 0) rotateZ(-5deg) rotateY(-2deg); }
  50% { transform: perspective(900px) translate3d(0, -8px, 0) rotateZ(10deg) rotateY(5deg); }
  67% { transform: perspective(900px) translate3d(0, 7px, 0) rotateZ(14deg) rotateY(7deg); }
  84% { transform: perspective(900px) translate3d(0, -9px, 0) rotateZ(2deg) rotateY(2deg); }
}
/* The wipe starts when the mono plane's tip reaches the viewport centre. */
@keyframes mono-reveal { 0%, 36% { clip-path: inset(0 0 0 0); } 49%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes colour-reveal-cutout { 0%, 36% { clip-path: inset(0 0 0 100%); } 49%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mono-reveal-mobile { 0%, 7% { clip-path: inset(0 0 0 0); } 20%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes colour-reveal-cutout-mobile { 0%, 7% { clip-path: inset(0 0 0 100%); } 20%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mono-handoff { 0%, 50% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes colour-handoff { 0%, 50% { opacity: 0; } 63%, 100% { opacity: 1; } }
@keyframes old-domain-transform { 0%, 45% { opacity: 1; transform: rotate(-17deg) scale(1); } 57%, 100% { opacity: 0; transform: rotate(-17deg) scale(.96); } }
@keyframes new-domain-transform { 0%, 45% { opacity: 0; transform: rotate(-17deg) scale(.96); } 57%, 100% { opacity: 1; transform: rotate(-17deg) scale(1); } }
@keyframes plane-travel { from { transform: translateX(0); } to { transform: translateX(700px); } }
@keyframes colour-reveal { 0%, 47% { transform: scaleX(0); } 72%, 100% { transform: scaleX(1); } }
@keyframes old-domain-out { 0%, 47% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes destination-in { 0%, 51% { opacity: 0; transform: translateY(10px); } 66%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes countdown { to { stroke-dashoffset: 270; } }

@media (max-width: 700px) {
  .brand { top: 24px; left: 24px; width: 39px; height: 64px; }
  .brand img { top: -53px; left: -7px; width: 175px; }
  .hero { padding: 140px 18px 32px; }
  h1 { font-size: clamp(1.25rem, 6.1vw, 2.3rem); letter-spacing: -1.5px; }
  .flight-stage { height: 300px; margin-top: 20px; }
  .plane-motion { --plane-size: min(52vw, 280px); left: 50%; top: 74px; height: min(151px, 28vw); }
  .plane-cutout { height: 100%; }
  .plane-image { top: clamp(-163px, -33vw, -102px); }
  .plane-colour { top: clamp(-157px, -31.7vw, -96px); }
  .route-domain { font-size: 32px; letter-spacing: .35px; }
  .old-domain { font-size: 28px; }
  .new-domain { font-size: 26px; }
  .route-line { left: 10%; top: 44%; width: 80%; }
  .message { font-size: .9rem; }
  .countdown { width: 125px; height: 125px; }
  .countdown-copy strong { font-size: 2.4rem; }
  .countdown-copy span { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .plane-art, .travelling-plane, .color-reveal, .old-domain, .destination-label, .countdown-progress, .plane-motion, .plane-mono, .plane-colour, .plane-domain, .plane-domain-new { animation: none; }
  .travelling-plane { transform: translateX(700px); }
  .color-reveal { transform: scaleX(1); }
  .old-domain { opacity: 0; }
  .destination-label { opacity: 1; }
  .plane-motion { transform: translate3d(80vw, -8px, 0) rotate(-2deg); }
  .plane-mono { opacity: 0; }
  .plane-colour, .plane-domain-new { opacity: 1; }
}