/* ==========================================================================
   CFI Model School - motion layer
   Presentation only: js/site.js tags the elements, these rules animate them.
   No content or layout depends on this file, and every effect is switched off
   under prefers-reduced-motion at the bottom.
   ========================================================================== */

/* --- headings that assemble word by word --------------------------------- */
.split-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-w > i {
    display: inline-block; font-style: inherit;
    transform: translateY(108%) rotate(3deg);
    opacity: 0;
    transition: transform .85s var(--ease), opacity .6s ease;
}
.is-in .split-w > i { transform: translateY(0) rotate(0); opacity: 1; }

/* --- image curtain reveal -------------------------------------------------- */
/* A clipped element reports no visible area, so IntersectionObserver never
   fires on it - these reveal from an ancestor that is being observed instead. */
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.wipe-up { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.wipe.is-in, .is-in .wipe,
.wipe-up.is-in, .is-in .wipe-up { clip-path: inset(0 0 0 0); }
.wipe img, .wipe-up img { transform: scale(1.14); transition: transform 1.7s var(--ease); }
.wipe.is-in img, .is-in .wipe img,
.wipe-up.is-in img, .is-in .wipe-up img { transform: scale(1); }

/* --- staggered children ----------------------------------------------------- */
.stagger > * {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1)   { transition-delay: .05s; }
.stagger.is-in > *:nth-child(2)   { transition-delay: .12s; }
.stagger.is-in > *:nth-child(3)   { transition-delay: .19s; }
.stagger.is-in > *:nth-child(4)   { transition-delay: .26s; }
.stagger.is-in > *:nth-child(5)   { transition-delay: .33s; }
.stagger.is-in > *:nth-child(6)   { transition-delay: .40s; }
.stagger.is-in > *:nth-child(7)   { transition-delay: .47s; }
.stagger.is-in > *:nth-child(8)   { transition-delay: .54s; }
.stagger.is-in > *:nth-child(n+9) { transition-delay: .60s; }

/* --- icons pop in, then react to hover --------------------------------------- */
.is-in .card-icon { animation: iconPop .7s var(--ease) both; }
@keyframes iconPop {
    0%   { transform: scale(.4) rotate(-18deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.card-x:hover .card-icon svg,
.info-card:hover .card-icon svg { animation: iconWiggle .6s ease; }
@keyframes iconWiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    25%      { transform: rotate(-12deg) scale(1.1); }
    75%      { transform: rotate(10deg) scale(1.1); }
}

/* --- buttons: shine sweep on hover, ripple on click ---------------------------- */
.btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    transition: left .75s var(--ease);
    pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-ghost::after, .btn-light::after {
    background: linear-gradient(100deg, transparent, rgba(242, 101, 34, .16), transparent);
}

.ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transform: scale(0); opacity: .75;
    animation: rippleOut .65s ease-out forwards;
    pointer-events: none;
}
.btn-light .ripple, .btn-ghost .ripple { background: rgba(242, 101, 34, .28); }
@keyframes rippleOut { to { transform: scale(2.8); opacity: 0; } }

/* --- gradient headline shimmer -------------------------------------------------- */
.gradient-text {
    background-size: 220% 100%;
    animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* --- eyebrow pill sheen ---------------------------------------------------------- */
.eyebrow { position: relative; overflow: hidden; }
.eyebrow::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
}
.is-in .eyebrow::after,
.is-in.eyebrow::after { animation: sheen 1.5s var(--ease) .3s; }
@keyframes sheen { to { left: 150%; } }

/* --- timeline draws itself -------------------------------------------------------- */
.timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--ease); }
.timeline.is-in::before { transform: scaleY(1); }
.timeline.is-in .tl-item::before { animation: dotIn .6s var(--ease) both; }
.timeline.is-in .tl-item:nth-child(2)::before { animation-delay: .15s; }
.timeline.is-in .tl-item:nth-child(3)::before { animation-delay: .30s; }
.timeline.is-in .tl-item:nth-child(4)::before { animation-delay: .45s; }
.timeline.is-in .tl-item:nth-child(5)::before { animation-delay: .60s; }
@keyframes dotIn {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- tick list: each tick draws in -------------------------------------------------- */
.tick-list.is-in li::after { animation: tickIn .45s var(--ease) both; }
.tick-list.is-in li:nth-child(2)::after   { animation-delay: .10s; }
.tick-list.is-in li:nth-child(3)::after   { animation-delay: .20s; }
.tick-list.is-in li:nth-child(4)::after   { animation-delay: .30s; }
.tick-list.is-in li:nth-child(5)::after   { animation-delay: .40s; }
.tick-list.is-in li:nth-child(n+6)::after { animation-delay: .50s; }
@keyframes tickIn {
    from { transform: rotate(-45deg) scale(0); opacity: 0; }
    to   { transform: rotate(-45deg) scale(1); opacity: 1; }
}

/* --- stat cards flip up --------------------------------------------------------------- */
.stat-card.reveal { transform: perspective(900px) rotateX(14deg) translateY(28px); }
.stat-card.reveal.is-in { transform: none; }

/* --- explore tiles drift slowly --------------------------------------------------------- */
.tile.is-in .tile-bg { animation: tileDrift 18s ease-in-out infinite alternate; }
@keyframes tileDrift {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.6%, -1.2%, 0); }
}
.tile:hover .tile-bg { animation-play-state: paused; }

/* --- gallery photos rise in --------------------------------------------------------------- */
.gallery-item.reveal { transform: translateY(30px) scale(.96); }
.gallery-item.reveal.is-in { transform: none; }

/* --- table rows slide in ------------------------------------------------------------------- */
.table-x.is-in tbody tr { animation: rowIn .5s var(--ease) both; }
.table-x.is-in tbody tr:nth-child(2)   { animation-delay: .07s; }
.table-x.is-in tbody tr:nth-child(3)   { animation-delay: .14s; }
.table-x.is-in tbody tr:nth-child(4)   { animation-delay: .21s; }
.table-x.is-in tbody tr:nth-child(5)   { animation-delay: .28s; }
.table-x.is-in tbody tr:nth-child(6)   { animation-delay: .35s; }
.table-x.is-in tbody tr:nth-child(n+7) { animation-delay: .42s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* --- soft floating decorations behind plain sections ---------------------------------------- */
.deco {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle at 30% 30%, rgba(242, 101, 34, .16), rgba(242, 101, 34, 0) 70%);
}
.deco-a { width: 280px; height: 280px; top: 5%; right: -70px; animation: floatA 16s ease-in-out infinite; }
.deco-b { width: 190px; height: 190px; bottom: 7%; left: -60px; animation: floatB 21s ease-in-out infinite;
          background: radial-gradient(circle at 30% 30%, rgba(233, 168, 44, .18), rgba(233, 168, 44, 0) 70%); }
.section--ink .deco { opacity: .55; }
@keyframes floatA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-26px, 32px) scale(1.12); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -28px) scale(1.1); } }
.section > .shell,
.section > .shell-narrow { position: relative; z-index: 1; }

/* --- parallax layers ------------------------------------------------------------------------- */
[data-parallax] { will-change: transform; }

/* --- cursor companion, pointer devices only --------------------------------------------------- */
.cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 3000;
    width: 32px; height: 32px; margin: -16px 0 0 -16px;
    border: 1.5px solid rgba(242, 101, 34, .5);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease, width .25s var(--ease), height .25s var(--ease),
                margin .25s var(--ease), background .25s ease, border-color .25s ease;
}
.cursor-ring.is-on { opacity: 1; }
.cursor-ring.is-hot {
    width: 56px; height: 56px; margin: -28px 0 0 -28px;
    background: rgba(242, 101, 34, .09);
    border-color: rgba(242, 101, 34, .75);
}

/* --- page transition veil ---------------------------------------------------------------------- */
.page-fade {
    position: fixed; inset: 0; z-index: 3500;
    background: var(--ink);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
    pointer-events: none;
}
.page-fade.is-on { opacity: 1; visibility: visible; }

/* --- small touches ------------------------------------------------------------------------------- */
.hero-dot:hover { background: rgba(6, 16, 32, .75); }

.section p a:not(.btn):not(.link-arrow) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s var(--ease), color .25s ease;
}
.section p a:not(.btn):not(.link-arrow):hover { background-size: 100% 1.5px; }

.footer-brand img { transition: transform 1.2s var(--ease); }
.footer-brand:hover img { transform: rotate(360deg) scale(1.06); }

.media-chip .chip-icon { animation: chipPulse 3.5s ease-in-out infinite; }
@keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 101, 34, .45); }
    50%      { box-shadow: 0 0 0 12px rgba(242, 101, 34, 0); }
}

.brand-mark { animation: crestFloat 5s ease-in-out infinite; }
@keyframes crestFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.brand:hover .brand-mark { animation: none; }

/* --- none of this runs when the visitor asks for less motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .split-w > i { transform: none !important; opacity: 1 !important; }
    .wipe, .wipe-up { clip-path: none !important; }
    .wipe img, .wipe-up img { transform: none !important; }
    .stagger > * { opacity: 1 !important; transform: none !important; }
    .timeline::before { transform: scaleY(1) !important; }
    .stat-card.reveal, .gallery-item.reveal { transform: none !important; }
    .deco, .cursor-ring, .page-fade { display: none !important; }
    .btn::after { display: none; }
    .brand-mark, .media-chip .chip-icon { animation: none !important; }
}