@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Regular.woff2') format('woff2'),
       url('fonts/Satoshi-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fbfbfd;
  color: #1d1d1f;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* brand */

.brand {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d1d1f;
  opacity: 0.55;
}

/* center CTA */

.cta-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid rgba(29, 29, 31, 0.18);
  border-radius: 0;
  color: #1d1d1f;
  text-decoration: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: #fbfbfd;
  appearance: none;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.cta:hover {
  background: #1d1d1f;
  color: #fff;
  border-color: #1d1d1f;
}

/* viewfinder: camera-style corner brackets that lock onto the button.
   opacity is driven by JS based on hover dwell time (see script.js);
   the whole frame also zooms in on mouseenter via a plain CSS transition. */

.viewfinder {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.6);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.cta-wrap.is-focusing .viewfinder {
  transform: scale(1.08);
}

.viewfinder .corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid #1d1d1f;
  transform: scale(1.25);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; transform-origin: top left; }
.corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; transform-origin: top right; }
.corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; transform-origin: bottom left; }
.corner.br { bottom: 0; right: 0; border-left: none; border-top: none; transform-origin: bottom right; }

.cta-wrap.is-focusing .corner {
  transform: scale(1.05);
}

/* full-page transition: a soft, blurred field of speed streaks (not
   solid stripes) swept across the viewport when the CTA is pressed.
   the individual lines are generated in JS so each play is a little
   different, see buildTransitionLines() in script.js */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
}

.page-transition.active {
  opacity: 1;
}

.transition-lines {
  position: absolute;
  inset: 0;
}

.transition-lines .streak {
  position: absolute;
  left: 50%;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(29, 29, 31, 0.4), transparent);
  filter: blur(3px);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.4);
}

.page-transition.active .streak {
  animation: panBlurPage 0.7s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes panBlurPage {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% - 60vw)) scaleX(0.4);
  }
  20% {
    opacity: 0.6;
  }
  70% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-50% + 60vw)) scaleX(1.6);
  }
}

/* footer tag */

.tag {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d1d1f;
  opacity: 0.35;
}

/* hidden photos */

.photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.photo {
  position: absolute;
  width: clamp(84px, 9.5vw, 126px);
  background-color: #eceef0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(0.9);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  pointer-events: auto;
  cursor: default;
}

.photo { aspect-ratio: 3 / 4; }
.photo.wide { aspect-ratio: 16 / 9; }

/* the round-robin fade itself (resting -> 80% -> resting, one photo at a
   time, resting bumped from 0 to a light value after each photo's first
   pass) is driven frame-by-frame from script.js instead of a CSS
   animation - CSS custom properties referenced inside @keyframes don't
   reliably pick up live updates once the animation is already running,
   which silently broke the "stay lightly visible" behavior. opacity is
   also left out of the base transition above for the same reason: a
   transition on a property script.js already reassigns every animation
   frame just re-chases a moving target, lagging behind the sine curve
   and quietly capping how high the fade-in could actually reach. */

.photo:hover {
  opacity: 1 !important;
  transform: rotate(var(--rot, 0deg)) scale(1.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
  transition: opacity 0.4s ease, transform 0.6s ease, box-shadow 0.6s ease;
}

.p1 { top: 9vh; left: 6vw; --rot: -4deg; }
.p2 { top: 20vh; right: 18vw; width: clamp(74px, 7.8vw, 108px); --rot: 3deg; }
.p3 { bottom: 11vh; left: 17vw; width: clamp(94px, 10.5vw, 140px); --rot: -2deg; }
.p4 { bottom: 22vh; right: 11vw; --rot: 5deg; }
.p5 { top: 50vh; left: 9vw; width: clamp(74px, 7.8vw, 104px); --rot: -3deg; }
.p6 { top: 38vh; right: 3vw; width: clamp(94px, 10.5vw, 140px); --rot: 4deg; }

@media (max-width: 700px) {
  .p2 { display: none; }
  .p5 { top: 60vh; width: clamp(64px, 17vw, 90px); }
  .brand { font-size: 10px; }
  .cta { padding: 14px 24px; font-size: 14px; }
  .field input { font-size: 16px; }
}

/* appointment page */

.appointment {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 380px;
  padding: 0 24px;
}

.appointment h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.appointment p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #1d1d1f;
  opacity: 0.6;
}

.appointment-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
}

.appointment-form[hidden] {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

.field label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d1d1f;
  opacity: 0.5;
}

.field input {
  font: inherit;
  font-size: 13px;
  padding: 10px 13px;
  border: 1px solid rgba(29, 29, 31, 0.18);
  border-radius: 0;
  background: #fff;
  color: #1d1d1f;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.field input::placeholder {
  color: #1d1d1f;
  opacity: 0.35;
}

.field input:focus {
  border-color: rgba(29, 29, 31, 0.5);
  box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.08);
}

.appointment-form .cta {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  padding: 12px 24px;
  font-size: 13px;
}

.form-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.form-status.is-error {
  color: #1d1d1f;
  opacity: 0.75;
}

.form-status.is-error a {
  color: inherit;
  text-decoration: underline;
}

.form-status.is-success {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  padding: 8px 0;
  color: #1d1d1f;
  animation: pageFadeIn 0.5s ease both;
}

.form-status.is-success p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.thanks-anim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fly-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #1d1d1f;
  opacity: 0.55;
}

.fly-camera {
  animation: flyCamera 9s linear infinite;
}

.fly-drone {
  opacity: 0.45;
  animation: flyDrone 12s linear infinite;
  animation-delay: -4s;
}

@keyframes flyCamera {
  0% { transform: translate(calc(-50% - 92px), -10px) rotate(-9deg); }
  12.5% { transform: translate(calc(-50% - 62px), -42px) rotate(-3deg); }
  25% { transform: translate(calc(-50% - 2px), -54px) rotate(4deg); }
  37.5% { transform: translate(calc(-50% + 58px), -32px) rotate(10deg); }
  50% { transform: translate(calc(-50% + 92px), 8px) rotate(8deg); }
  62.5% { transform: translate(calc(-50% + 60px), 42px) rotate(2deg); }
  75% { transform: translate(calc(-50% + 0px), 54px) rotate(-4deg); }
  87.5% { transform: translate(calc(-50% - 60px), 30px) rotate(-10deg); }
  100% { transform: translate(calc(-50% - 92px), -10px) rotate(-9deg); }
}

@keyframes flyDrone {
  0% { transform: translate(calc(-50% + 100px), 20px) rotate(6deg) scale(0.85); }
  12.5% { transform: translate(calc(-50% + 62px), 48px) rotate(2deg) scale(0.85); }
  25% { transform: translate(calc(-50% + 2px), 58px) rotate(-4deg) scale(0.85); }
  37.5% { transform: translate(calc(-50% - 58px), 36px) rotate(-9deg) scale(0.85); }
  50% { transform: translate(calc(-50% - 100px), -6px) rotate(-6deg) scale(0.85); }
  62.5% { transform: translate(calc(-50% - 62px), -42px) rotate(0deg) scale(0.85); }
  75% { transform: translate(calc(-50% + 0px), -56px) rotate(6deg) scale(0.85); }
  87.5% { transform: translate(calc(-50% + 62px), -32px) rotate(9deg) scale(0.85); }
  100% { transform: translate(calc(-50% + 100px), 20px) rotate(6deg) scale(0.85); }
}

.back-link {
  margin-top: 4px;
  font-size: 13px;
  color: #1d1d1f;
  opacity: 0.45;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.back-link:hover {
  opacity: 0.9;
}

body.page-enter {
  animation: pageFadeIn 0.5s ease both;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}