/* SMP Development — component layer on top of Tailwind.
   Utilities carry layout, spacing, type and color in index.php.
   Only things utilities can't express live here: the ski track, snow,
   entrance choreography, hero drift/reveal, and reduced-motion rules.
   Tokens live in tailwind.config (index.php). */

/* ---------- page in ---------- */
body{opacity:0;animation:pagein 1.1s cubic-bezier(.22,.61,.36,1) .05s forwards}
@keyframes pagein{to{opacity:1}}

/* ---------- background environment (snow) ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#f3f6f9 0%,#e4eaf1 100%)}
.env::after{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse 50% 40% at 70% 30%,rgba(242,217,160,.35),transparent 70%);animation:envdrift 75s cubic-bezier(.22,.61,.36,1) -20s infinite alternate}
@keyframes envdrift{to{transform:translate(-8%,6%)}}
.snow{position:absolute;inset:0;overflow:hidden}
.snow i{position:absolute;top:-2vh;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 6px rgba(255,255,255,.7);animation:fall var(--d,70s) linear var(--dl,0s) infinite;opacity:0}
@keyframes fall{0%{transform:translate(0,0);opacity:0}6%{opacity:var(--o,.6)}94%{opacity:var(--o,.6)}100%{transform:translate(var(--x,10px),104vh);opacity:0}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- hero ---------- */
.hero-bg{animation:drift 14s ease-out forwards}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-scrim{background:linear-gradient(180deg,rgba(10,14,20,.5) 0%,rgba(10,14,20,0) 22%,rgba(10,14,20,0) 48%,rgba(10,14,20,.72) 100%),radial-gradient(ellipse 60% 70% at 22% 62%,rgba(5,5,10,.55) 0%,rgba(5,5,10,.25) 46%,rgba(5,5,10,0) 76%)}
.hero-text{text-shadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8)}
/* word-by-word rise on load (split by site.js) */
.w{display:inline-block;white-space:pre;opacity:0;transform:translateY(26px);animation:wordrise 1.1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.35s + var(--i,0)*.09s)}
@keyframes wordrise{to{opacity:1;transform:none}}
.rise{opacity:0;transform:translateY(16px);animation:wordrise 1s cubic-bezier(.16,1,.3,1) forwards}
.cue span{display:block;width:1px;height:28px;background:currentColor;animation:cuepulse 2.6s cubic-bezier(.22,.61,.36,1) -1.2s infinite}
@keyframes cuepulse{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media (max-height:560px){.cue{display:none}}

/* ---------- the ski track (signature element, S-curve behind sections) ---------- */
.track{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.track path{fill:none;stroke:#f7ab17;stroke-width:2;stroke-linecap:round;opacity:.75}

/* ---------- entrance choreography ---------- */
.rv .part{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.in .part{opacity:1;transform:none}
.rv .part:nth-child(2){transition-delay:.1s}.rv .part:nth-child(3){transition-delay:.2s}.rv .part:nth-child(4){transition-delay:.3s}.rv .part:nth-child(5){transition-delay:.4s}.rv .part:nth-child(6){transition-delay:.5s}
.rv.done .part:nth-child(n){transition-delay:0s}

/* ---------- photo frames & cards ---------- */
.frame img,.card img,.season img{transition:transform 8s cubic-bezier(.22,.61,.36,1)}
.frame:hover img{transform:scale(1.04)}
.card:hover img,.season:hover img{transform:scale(1.05)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,28,38,0) 35%,rgba(19,28,38,.85) 100%)}
.season::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,28,38,0) 40%,rgba(19,28,38,.8) 100%)}
.card .more::after{content:" \2192";display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card:hover .more::after{transform:translateX(4px)}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:#f7ab17;transform:scaleX(.35);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.link:hover::after{transform:scaleX(1)}

/* ---------- parallax band (Tucker) ---------- */
.band{background-attachment:fixed}
@media (pointer:coarse){.band{background-attachment:scroll}}

/* ---------- nav states ---------- */
#nav.solid{background:rgba(19,28,38,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#nav a{text-shadow:0 1px 3px rgba(5,5,10,.6)}
#nav.solid a,#nav .btn,.btn{text-shadow:none}

/* ---------- forms ---------- */
select option{color:#131c26}
input:focus,select:focus,textarea:focus{outline:none;border-color:#f7ab17;background:rgba(255,255,255,.1)}
:focus-visible{outline:3px solid #f7ab17;outline-offset:3px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .rv .part,.w,.rise{opacity:1;transform:none}
  .snow{display:none}
  .track path{stroke-dashoffset:0!important}
  .band{background-attachment:scroll}
}