/* ==========================================================================
   Abram Holidays — motion layer
   Creative, self-contained sections used on the home and about pages.
   Everything here degrades to a static layout under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Split-text heading reveal ---------- */
/* js/site.js wraps each word in .sw > .sw__i so the inner span can slide up. */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.sw__i{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease-out);transition-delay:var(--sw-d,0ms)}
.is-in .sw__i{transform:translateY(0)}

/* ---------- Marquee ribbon ---------- */
.marquee{
  --mq-bg:var(--surface);
  position:relative;overflow:hidden;background:var(--mq-bg);
  padding-block:clamp(16px,1.8vw,26px);
  border-block:1px solid var(--line-2)
}
.marquee--dark{--mq-bg:var(--dark);color:#fff;border-color:rgba(255,255,255,.1)}
.marquee__track{display:flex;width:max-content;animation:mq-scroll 42s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee--fast .marquee__track{animation-duration:26s}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:clamp(22px,3vw,54px);padding-right:clamp(22px,3vw,54px);flex:none}
.marquee__item{
  display:inline-flex;align-items:center;gap:clamp(14px,1.6vw,22px);white-space:nowrap;
  font-size:clamp(1.15rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.035em
}
.marquee__item svg{width:.72em;height:.72em;color:var(--accent);flex:none}
.marquee__item--muted{color:var(--ink-4)}
.marquee--dark .marquee__item--muted{color:rgba(255,255,255,.34)}
@keyframes mq-scroll{to{transform:translateX(-50%)}}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(36px,7vw,130px);z-index:2;pointer-events:none
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--mq-bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--mq-bg),transparent)}

/* ---------- Expanding panel gallery ---------- */
.panels{display:grid;gap:clamp(8px,1vw,12px);grid-auto-rows:clamp(150px,34vw,230px)}
@media (min-width:920px){
  .panels{display:flex;height:clamp(390px,44vw,560px);grid-auto-rows:auto}
}
.panel-card{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);background:var(--bg-2);box-shadow:var(--sh-2);
  flex:1 1 0;min-width:0;
  transition:flex-grow .85s var(--ease-out),box-shadow .5s var(--ease-out)
}
@media (min-width:920px){
  .panel-card.is-open{flex-grow:3.4;box-shadow:var(--sh-4)}
}
.panel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out),filter .7s var(--ease)}
@media (min-width:920px){
  .panel-card img{filter:grayscale(.35) brightness(.86)}
  .panel-card.is-open img{filter:none;transform:scale(1.04)}
}
.panel-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,7,.08) 30%,rgba(8,8,7,.62) 74%,rgba(8,8,7,.9) 100%)}
.panel-card__body{
  position:absolute;inset:auto 0 0 0;padding:clamp(16px,1.8vw,28px);color:#fff;
  display:grid;gap:6px
}
.panel-card__kicker{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.panel-card__title{font-size:clamp(1.05rem,1.4vw,1.45rem);font-weight:600;letter-spacing:-.025em}
.panel-card__text{
  font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.8);max-width:36ch;
  opacity:1;max-height:9em;transition:opacity .5s var(--ease),max-height .6s var(--ease)
}
@media (min-width:920px){
  .panel-card__text{opacity:0;max-height:0;overflow:hidden}
  .panel-card.is-open .panel-card__text{opacity:1;max-height:9em;transition-delay:.15s}
  /* A collapsed panel is too narrow for a horizontal label, so the title turns
     on its side and reads bottom-to-top along the edge. */
  .panel-card:not(.is-open) .panel-card__body{
    inset:auto auto clamp(16px,1.8vw,26px) clamp(12px,1.2vw,18px);
    writing-mode:vertical-rl;transform:rotate(180deg);
    width:auto;max-height:calc(100% - 96px)
  }
  .panel-card:not(.is-open) .panel-card__kicker{display:none}
  .panel-card:not(.is-open) .panel-card__title{font-size:1.02rem;white-space:nowrap}
}
.panel-card__no{
  position:absolute;top:clamp(12px,1.4vw,20px);left:clamp(12px,1.4vw,20px);
  width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:.76rem;font-weight:700;backdrop-filter:blur(8px)
}

/* ---------- Flight-path band ---------- */
.flightband{
  position:relative;overflow:hidden;border-radius:clamp(20px,2.4vw,var(--r-xl));
  background:var(--dark);color:#fff;isolation:isolate;
  padding:clamp(34px,5vw,72px) clamp(20px,4vw,60px)
}
.flightband::before{
  content:"";position:absolute;inset:-30% -20% auto -20%;height:560px;z-index:-1;
  background:radial-gradient(60% 60% at 22% 40%,rgba(216,35,42,.30),transparent 70%),
             radial-gradient(50% 55% at 82% 30%,rgba(233,162,59,.22),transparent 72%);
  animation:band-drift 19s var(--ease) infinite alternate
}
@keyframes band-drift{to{transform:translate3d(4%,7%,0) scale(1.12)}}
.flightband__head{display:grid;gap:12px;max-width:46ch;position:relative;z-index:2}
.flightband__head p{color:rgba(255,255,255,.66)}
.flightband__map{position:relative;margin-top:clamp(28px,4vw,52px);height:clamp(190px,26vw,300px)}
.flightband__map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fp-line{
  fill:none;stroke:rgba(255,255,255,.34);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 11;
  opacity:0;transition:opacity .6s var(--ease)
}
.is-in .fp-line{opacity:1}
.fp-solid{
  fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:var(--fp-len,1400);stroke-dashoffset:var(--fp-len,1400);
  transition:stroke-dashoffset 2.6s var(--ease-out)
}
.is-in .fp-solid{stroke-dashoffset:0}
.fp-stop{opacity:0;transition:opacity .5s var(--ease-out)}
.is-in .fp-stop{opacity:1}
.fp-stop circle{fill:#fff}
.fp-stop text{fill:rgba(255,255,255,.82);font-size:13px;font-weight:600;letter-spacing:-.01em}
/* The plane rides the route with SVG <animateMotion>, so it scales with the
   viewBox instead of needing pixel maths. */
.fp-plane{fill:#fff;opacity:0;transition:opacity .6s var(--ease) .5s}
.is-in .fp-plane{opacity:1}

/* ---------- Timeline (about) ---------- */
.tl{position:relative;display:grid;gap:clamp(18px,2.4vw,34px);padding-left:46px}
@media (min-width:860px){.tl{padding-left:0}}
.tl__rail{position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--line);overflow:hidden}
@media (min-width:860px){.tl__rail{left:50%;transform:translateX(-1px)}}
.tl__rail span{display:block;width:100%;height:100%;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease-out)}
.tl.is-in .tl__rail span{transform:scaleY(1)}
.tl__item{position:relative}
@media (min-width:860px){
  .tl__item{width:calc(50% - clamp(26px,3vw,46px))}
  .tl__item:nth-child(even){margin-left:auto}
}
.tl__dot{
  position:absolute;left:-46px;top:10px;width:32px;height:32px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-1);color:var(--ink)
}
.tl__dot svg{width:15px;height:15px}
@media (min-width:860px){
  .tl__dot{left:auto;right:calc((clamp(26px,3vw,46px) + 16px) * -1)}
  .tl__item:nth-child(even) .tl__dot{right:auto;left:calc((clamp(26px,3vw,46px) + 16px) * -1)}
}
.tl__card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:clamp(18px,2vw,28px);box-shadow:var(--sh-1);display:grid;gap:8px;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)
}
.tl__card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.tl__year{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.tl__card p{color:var(--ink-3);font-size:.93rem;line-height:1.6}

/* ---------- Pointer tilt ---------- */
.tilt{will-change:transform;transition:transform .6s var(--ease-out)}
.tilt.is-tilting{transition:transform .12s linear}

/* ---------- Spotlight cards ---------- */
/* A soft highlight follows the pointer; --mx/--my are set in js/site.js. */
.spot{position:relative;isolation:isolate}
.spot::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(216,35,42,.13),transparent 70%);
  transition:opacity .4s var(--ease)
}
.spot:hover::after{opacity:1}

/* ---------- Floating accents ---------- */
.floaty{animation:floaty 7s var(--ease) infinite alternate}
@keyframes floaty{to{transform:translateY(-14px)}}
.floaty--slow{animation-duration:11s}

/* ---------- Aurora CTA backdrop ---------- */
.cta--aurora::after{
  content:"";position:absolute;inset:-45% auto auto -20%;width:520px;height:520px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(233,162,59,.26),transparent 62%);
  animation:band-drift 15s var(--ease) infinite alternate
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .sw__i{transform:none}
  .fp-solid{stroke-dashoffset:0}
  .fp-line,.fp-stop{opacity:1}
  .flightband__plane,.floaty{animation:none}
  .flightband::before,.cta--aurora::after{animation:none}
  .tl__rail span{transform:scaleY(1)}
}