/* ============================================================
   ANIMATIONS.CSS — Scroll reveal, transitions
   ============================================================ */

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay variants */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }
.reveal-d6 { transition-delay: 0.6s; }

/* Large-element slide reveal — more dramatic translateY for big type */
.reveal-slide {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-slide.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-up alias */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PARALLAX LAYER (hero bg)
   ============================================================ */
.parallax-layer {
  will-change: transform;
}

/* ============================================================
   HERO ENTRY ANIMATION
   1 = hero-identity   2 = splitflap-wrapper
   3 = flight-status   4 = hero-tagline
   ============================================================ */
.hero-content > * {
  animation: heroFadeUp 0.8s ease both;
}

.hero-content > *:nth-child(1) { animation-delay: 0.30s; }  /* name + role */
.hero-content > *:nth-child(2) { animation-delay: 0.55s; }  /* board */
.hero-content > *:nth-child(3) { animation-delay: 0.85s; }  /* flight status */
.hero-content > *:nth-child(4) { animation-delay: 1.05s; }  /* tagline */

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SECTION TITLE SLIDE
   ============================================================ */
.section-title-wrap {
  overflow: hidden;
}

.section-title-wrap h2 {
  animation: none; /* controlled by .reveal class */
}

/* ============================================================
   NAV ITEM HOVER UNDERLINE
   ============================================================ */
@keyframes underlineIn {
  from { width: 0; }
  to   { width: 100%; }
}

/* scroll-indicator animation is defined in layout.css (.scroll-plane, .scroll-contrail) */

/* ============================================================
   TIMELINE DOT PULSE
   ============================================================ */
.timeline-entry.visible::before {
  animation: dotPop 0.4s ease both;
}

@keyframes dotPop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ============================================================
   ABOUT ROLES — split-flap tile per character
   Structure: .about-char (static tile box) > .about-char-face (text that rotates)
   Mirrors the hero exactly: .tile stays still, .tile .face flips.
   ============================================================ */

/* Static tile container — never moves */
.about-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2c2c2c 0%, #181818 100%);
  border-radius: 6px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  padding: 0.04em 0.07em;
  margin: 0 0.03em;
  perspective: 600px;       /* provides depth for face's rotateX */
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  transition: box-shadow 0.15s ease;
}

/* Centre divider line — the signature split-flap detail */
.about-char::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
  z-index: 2;
  pointer-events: none;
}

/* Tile glow during flip */
.about-char.flipping {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* The text face — this is what actually rotates */
.about-char-face {
  display: block;
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
  user-select: none;
  pointer-events: none;
  line-height: 1;
  -webkit-text-stroke: 0;   /* reset outline from any parent */
  transition: color 350ms ease, text-shadow 350ms ease;
}

/* MENTOR: outlined hollow white letters */
.about-role--outline .about-char-face {
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-shadow: none;
  transition: color 350ms ease, -webkit-text-stroke-color 350ms ease, filter 350ms ease;
}

/* Face flips with rotateX — tile box stays in place */
.about-char-face.flipping {
  animation: aboutFaceFlip 85ms linear;
}

/* ============================================================
   LIGHT MODE — tile refinements
   Keep the airport-dark aesthetic; reduce harsh shadows,
   shift glow to navy accent so it reads on the warm bg.
   ============================================================ */
[data-theme="light"] .about-char {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .about-char.flipping {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.20),
    0 0 22px rgba(26, 26, 110, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Slightly warmer white so text doesn't bleed on light bg */
[data-theme="light"] .about-char-face {
  color: #f0ece0;
  text-shadow: none;
}

[data-theme="light"] .about-role--outline .about-char-face {
  -webkit-text-stroke-color: #f0ece0;
}

@keyframes aboutFaceFlip {
  0%   { transform: rotateX(0deg);   opacity: 1; }
  40%  { transform: rotateX(-88deg); opacity: 0; }
  60%  { transform: rotateX(88deg);  opacity: 0; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}

/* ============================================================
   LUGGAGE TAG STAGGER (JS handles delay via style attr)
   ============================================================ */
.luggage-tag {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow 0.25s ease, border-color 0.25s ease;
}

.luggage-tag.visible {
  opacity: 1;
  transform: translateY(0);
}

/* hover overrides the base (must be after .visible rule) */
.luggage-tag.visible:hover {
  transform: translateY(-4px) rotate(-1deg);
}

/* ============================================================
   FLIGHT LOG — LOG ENTRY activation glow
   Triggered when accordion opens (.fl-entry.is-open)
   ============================================================ */
@keyframes logEntryGlow {
  0%   { opacity: 0;    text-shadow: none; }
  30%  { opacity: 1;    text-shadow: 0 0 14px currentColor; }
  65%  { opacity: 0.85; text-shadow: 0 0 6px currentColor; }
  100% { opacity: 0.6;  text-shadow: none; }
}

.fl-entry.is-open .fl-window-eyebrow {
  animation: logEntryGlow 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}