/* ============================================================
   HAVA.SI — responsive + lite (imported last, wins cascade)
   Desktop = 3D flight. Tablet/phone = lite vertical flow.
   Goal: the lite experience must feel premium, not a fallback.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   LITE: drop 3D flight, polished vertical flow
   ════════════════════════════════════════════════════════════ */
.flight-lite { scroll-behavior: smooth; }
.flight-lite .flight { position: static; perspective: none; transform-style: flat; pointer-events: auto; }
.flight-lite .panel {
  position: relative; top: auto; left: auto;
  transform: none !important; filter: none !important;
  opacity: 1 !important; visibility: visible !important;
  width: 100%; display: block; pointer-events: auto;
  padding-block: clamp(4.5rem, 13vh, 8rem);
  border-bottom: none;
}
/* gradient hairline divider between sections (replaces flat border) */
.flight-lite .panel:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(86%, 1040px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2) 18%, color-mix(in srgb, var(--red) 40%, transparent) 50%, var(--border-2) 82%, transparent);
}
.flight-lite .panel__in {
  width: 100%; max-width: var(--maxw); max-height: none;
  margin-inline: auto; padding-inline: var(--gut);
}
.flight-lite .panel { filter: none !important; }
.flight-lite .driver { display: none; }

/* ── scroll reveal: the ACTUAL animation is WAAPI — flight.js calls the
   same assemble() the desktop flight uses, so every device animates
   identically (no dependence on CSS animation support or OS settings).
   CSS only PRE-HIDES content until its panel enters the viewport.
   Hidden state applies ONLY after JS tags the panel .rv → if JS fails,
   nothing gets stuck hidden. ── */
.flight-lite .panel.rv:not(.in) .panel__in > * { opacity: 0; }
.flight-lite .panel.rv:not(.in) .char { transform: translateY(112%); }
.flight-lite #hero.rv:not(.in) .hero__title { opacity: 0; }

/* crimson scan-beam: sweeps across the section's top edge as it reveals,
   then dissolves — announces every section like a HUD boot line */
.flight-lite .panel__in { position: relative; }
.flight-lite .panel.in:not(#hero) .panel__in::before {
  content: ''; position: absolute; top: -22px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--red), var(--neon) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--red) 55%, transparent);
  transform-origin: left center; pointer-events: none;
  animation: liteBeam 1.15s var(--e-out) both;
}
@keyframes liteBeam {
  0%   { transform: scaleX(0); opacity: 0; }
  12%  { opacity: 1; }
  62%  { transform: scaleX(1); opacity: .9; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* cards + chips: pre-hidden until their panel reveals (WAAPI staggers them) */
.flight-lite .panel.rv:not(.in) :is(.skill, .service, .cli-card, .work__item, .chip) { opacity: 0; }

/* (3D scroll drift is JS-driven in flight.js lite — same engine as the
   desktop flight loop, works on every device incl. Reduce Motion.) */
.flight-lite .panel__in { will-change: transform, opacity; }

/* end screen needs height to breathe in flow */
.flight-lite .panel--end { min-height: 88vh; display: grid; place-items: center; }

/* in flow the panels carry a max-height; let them grow */
.flight-lite .panel__in { max-height: none; }

/* ════════════════════════════════════════════════════════════
   TOUCH: no hover → reveal captions & full-colour imagery by default
   ════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .work__item img { filter: grayscale(0) brightness(.95); }
  .work__overlay { opacity: 1; background: linear-gradient(to top, rgba(6,5,9,.92) 6%, rgba(6,5,9,.2) 46%, transparent 72%); }
  .work__badge { opacity: 1; transform: none; }
  .work__item::after { display: none; }

  /* ── tactile press feedback on every clickable control. `.is-pressed` is
     added by JS (reliable on iOS where :active won't fire); :active is a bonus.
     PRESS responds instantly (~.1s) — RELEASE springs back slowly (~.5s):
     the asymmetry is what makes a tap actually feel like a transition. ── */
  .btn, .nav__logo, .nav__burger, .lang button, .chip, .contact__link, .srv__cta,
  .work__item, .to-top, .lightbox__close, .lightbox__nav, .lightbox__visit {
    -webkit-tap-highlight-color: transparent;
    transition: transform .5s var(--e-spring), opacity .5s var(--e-out),
                color .5s var(--e-out), background-color .5s var(--e-out),
                border-color .5s var(--e-out), box-shadow .5s var(--e-out),
                filter .5s var(--e-out);
  }
  /* kill the iOS gray tap flash EVERYWHERE — our press states replace it */
  a, button, .skill, .service, .cli-card { -webkit-tap-highlight-color: transparent; }

  /* cards: release must animate transform too (desktop drives tilt via JS,
     so this transition lives ONLY here in the touch world) */
  .cli-card, .skill, .service {
    transition: border-color .5s var(--e-out), box-shadow .5s var(--e-out),
                transform .5s var(--e-spring);
  }
  /* the press itself snaps in fast on everything */
  :is(.btn, .nav__logo, .nav__burger, .lang button, .chip, .contact__link, .srv__cta,
      .work__item, .to-top, .lightbox__close, .lightbox__nav, .lightbox__visit,
      .cli-card, .skill, .service):is(:active, .is-pressed) { transition-duration: .1s; }

  /* card press: compress INTO the screen (iOS-like, replaces the desktop
     hover-lift which looks wrong under a finger) — glow + spotlight stay */
  .cli-card:active, .cli-card.is-pressed,
  .skill:active, .skill.is-pressed,
  .service:active, .service.is-pressed {
    transform: scale(.965);
    border-color: color-mix(in srgb, var(--neon) 65%, transparent);
    box-shadow: 0 6px 26px color-mix(in srgb, var(--neon) 28%, transparent);
  }
  .mobile-menu a:active, .mobile-menu a.is-pressed { transform: scale(.95); transition-duration: .12s; }

  /* accent bar: SAME look as desktop, but on touch the WHOLE pill drives
     the hue (main.js) — the input itself only renders the thumb */
  .hub { touch-action: none; }
  .hub__row input { height: 30px; pointer-events: none; }

  .nav__burger:active, .nav__burger.is-pressed             { transform: scale(.86); }
  .nav__burger:active span, .nav__burger.is-pressed span   { background: var(--red); }
  .btn:active, .btn.is-pressed                         { transform: scale(.93); filter: brightness(1.12); }
  .btn--ghost:active, .btn--ghost.is-pressed           { color: var(--text); box-shadow: inset 0 0 0 1px var(--red); }
  .nav__logo:active, .nav__logo.is-pressed             { transform: scale(.9); }
  .nav__logo:active svg, .nav__logo.is-pressed svg     { color: var(--red); }
  .lang button:active, .lang button.is-pressed         { color: var(--red); transform: scale(.92); }
  .chip:active, .chip.is-pressed                       { border-color: var(--red); color: var(--text); background: color-mix(in srgb, var(--red) 8%, transparent); transform: scale(.95); }
  .contact__link:active, .contact__link.is-pressed     { border-color: var(--red); color: var(--text); transform: scale(.96); }
  .srv__cta:active, .srv__cta.is-pressed               { color: var(--neon); transform: translateX(4px); }
  .work__item:active, .work__item.is-pressed           { transform: scale(.965); border-color: var(--red); }
  .to-top:active, .to-top.is-pressed                   { transform: scale(.9); color: var(--neon); }
  .mobile-menu a:active, .mobile-menu a.is-pressed     { color: var(--red); }
  .lightbox__close:active, .lightbox__close.is-pressed,
  .lightbox__nav:active, .lightbox__nav.is-pressed     { transform: scale(.85); color: var(--red); }
  .lightbox__visit:active, .lightbox__visit.is-pressed { transform: scale(.94); background: var(--red); }
}

/* ════════════════════════════════════════════════════════════
   TABLET ≤ 1024px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .skills__grid { grid-template-columns: repeat(2, 1fr); }
  .services__grid,
  .services__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .work__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   MOBILE ≤ 768px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav { padding-inline: var(--gut); padding-top: max(1.1rem, env(safe-area-inset-top)); }
  .nav__hud { display: none; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }

  /* hero headline dominates the screen on mobile */
  .hero__in { width: 100%; }
  .hero__title { font-size: clamp(3.6rem, 18.5vw, 7rem); line-height: .9; letter-spacing: -.03em; margin-bottom: 1.3rem; }
  .hero__desc { font-size: 1.02rem; max-width: 36ch; }
  .hero__cta { gap: .7rem; }

  .about__in { grid-template-columns: 1fr; gap: 2.4rem; }
  .about__lead p { max-width: none; }
  .contact__in { gap: 1.2rem; }

  .skills__grid { grid-template-columns: 1fr 1fr; }
  .cli-grid { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr; }

  /* services stack to a single readable column */
  .services__grid,
  .services__grid--4 { grid-template-columns: 1fr; }

  /* WORK: horizontal snap-swipe rail — designed for the thumb, not a
     shrunken desktop grid. Bleeds to the screen edges, snaps per card. */
  .work__grid {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gut));
    padding: 4px var(--gut) 16px;
    scrollbar-width: none;
  }
  .work__grid::-webkit-scrollbar { display: none; }
  .work__item { flex: 0 0 64vw; scroll-snap-align: center; }
  .work__item--feature { flex: 0 0 86vw; aspect-ratio: 5 / 1; }   /* banner stays whole on mobile too */

  /* hero breathing room */
  .hero__desc { margin-bottom: 2rem; }

  /* to-top respects the home-bar safe area */
  .to-top { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════
   PHONE ≤ 560px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .skills__grid { grid-template-columns: 1fr; }
  .about__spec { gap: 1.6rem; }
  .work__item--feature .work__overlay h3 { font-size: 1.15rem; }

  .contact__big { width: 100%; justify-content: center; }
  .contact__links { width: 100%; }
  .contact__link { flex: 1; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   SMALL ≤ 400px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .cli-grid { grid-template-columns: 1fr; }
  .work__item { flex-basis: 76vw; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .about__spec { flex-direction: row; flex-wrap: wrap; }
}

/* ── short landscape phones: trim vertical padding ── */
@media (max-height: 560px) and (orientation: landscape) {
  .flight-lite .panel { padding-block: clamp(3rem, 10vh, 5rem); }
}