/*
 * Te Kete Ako — homepage motion layer
 *
 * A brief, CSS-only arrival sequence for the first fold. Motion never blocks
 * interaction, and both reduced-motion and print modes resolve immediately to
 * the final layout.
 */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: tka-page-away 140ms ease-in both;
}

::view-transition-new(root) {
    animation: tka-page-arrive 260ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

body[data-current-page="home"] {
    --tka-arrival-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* The previous landing rules animate the whole hero and its children at once.
   Keep the container still so the ordered sequence below is the sole arrival. */
body[data-current-page="home"] #logged-out-hero .hero-content,
body[data-current-page="home"] #logged-out-hero .hero-main {
    animation: none;
}

body[data-current-page="home"] #site-top-banner {
    animation: tka-arrive-down 360ms var(--tka-arrival-ease) both;
}

body[data-current-page="home"] #logged-out-hero .hero-brandmark {
    animation: tka-arrive-up 440ms var(--tka-arrival-ease) 60ms both;
}

body[data-current-page="home"] #logged-out-hero .hero-headline {
    animation: tka-arrive-up 520ms var(--tka-arrival-ease) 110ms both;
}

body[data-current-page="home"] #logged-out-hero .hero-sub {
    animation: tka-arrive-up 500ms var(--tka-arrival-ease) 180ms both;
}

body[data-current-page="home"] #logged-out-hero .hero-actions-center,
body[data-current-page="home"] #logged-out-hero .hero-micro-cta {
    animation: tka-arrive-up 460ms var(--tka-arrival-ease) 250ms both;
}

body[data-current-page="home"] #logged-out-hero .hero-cta-panel {
    animation: tka-arrive-panel 560ms var(--tka-arrival-ease) 180ms both;
}

body[data-current-page="home"] #logged-out-hero .hero-integrated-footer {
    animation: tka-arrive-up 560ms var(--tka-arrival-ease) 320ms both;
}

body[data-current-page="home"] #logged-out-hero .stat-item {
    animation: tka-stat-settle 420ms var(--tka-arrival-ease) both;
}

body[data-current-page="home"] #logged-out-hero .stat-item:nth-child(1) {
    animation-delay: 390ms;
}

body[data-current-page="home"] #logged-out-hero .stat-item:nth-child(2) {
    animation-delay: 460ms;
}

body[data-current-page="home"] #logged-out-hero .stat-item:nth-child(3) {
    animation-delay: 530ms;
}

body[data-current-page="home"] #logged-out-hero .stat-item:nth-child(4) {
    animation-delay: 600ms;
}

body[data-current-page="home"] #logged-out-hero .stat-item:nth-child(5) {
    animation-delay: 670ms;
}

/* Auth state can replace the guest hero after page load. Give that surface one
   quiet reveal without depending on JavaScript animation hooks. */
body[data-current-page="home"] #logged-in-hero:not([hidden]) {
    animation: tka-arrive-up 480ms var(--tka-arrival-ease) both;
}

@keyframes tka-arrive-down {
    from {
        opacity: 0;
        transform: translateY(-0.55rem);
    }
}

@keyframes tka-arrive-up {
    from {
        opacity: 0;
        transform: translateY(0.8rem);
    }
}

@keyframes tka-arrive-panel {
    from {
        opacity: 0;
        transform: translate3d(0.9rem, 0.45rem, 0) scale(0.985);
    }
}

@keyframes tka-stat-settle {
    from {
        opacity: 0;
        transform: translateY(0.45rem);
    }
}

@keyframes tka-page-away {
    to {
        opacity: 0;
    }
}

@keyframes tka-page-arrive {
    from {
        opacity: 0;
    }
}

/* Save-to-Kete confetti burst — fires from the save button on success */
@keyframes tka-confetti-rise {
    to {
        transform:
            translateY(var(--confetti-dy, -110px))
            translateX(var(--confetti-dx, 0px))
            rotate(var(--confetti-spin, 200deg));
        opacity: 0;
    }
}

.tka-confetti-particle {
    position: fixed;
    width: 5px;
    height: 9px;
    pointer-events: none;
    z-index: 9999;
    animation: tka-confetti-rise 0.9s ease-out forwards;
    animation-delay: var(--confetti-delay, 0ms);
}

/* Back-to-top button — appears after 300px scroll */
.tka-back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    width: 40px;
    height: 40px;
    background: var(--color-primary, #0f766e);
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.15s;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.tka-back-to-top.tka-btt-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.tka-back-to-top:hover {
    background: var(--color-secondary, #059669);
}

/* Lift button above lesson nav strip on lesson pages */
body.tc-lesson-body .tka-back-to-top {
    bottom: calc(44px + 1rem);
}

@media (prefers-reduced-motion: reduce) {
    .tka-confetti-particle { display: none; }
    .tka-back-to-top { transition: none; }

    ::view-transition-old(root),
    ::view-transition-new(root),
    body[data-current-page="home"] #site-top-banner,
    body[data-current-page="home"] #logged-out-hero .hero-content,
    body[data-current-page="home"] #logged-out-hero .hero-main,
    body[data-current-page="home"] #logged-out-hero .hero-brandmark,
    body[data-current-page="home"] #logged-out-hero .hero-headline,
    body[data-current-page="home"] #logged-out-hero .hero-sub,
    body[data-current-page="home"] #logged-out-hero .hero-actions-center,
    body[data-current-page="home"] #logged-out-hero .hero-micro-cta,
    body[data-current-page="home"] #logged-out-hero .hero-cta-panel,
    body[data-current-page="home"] #logged-out-hero .hero-integrated-footer,
    body[data-current-page="home"] #logged-out-hero .stat-item,
    body[data-current-page="home"] #logged-in-hero:not([hidden]) {
        animation: none;
        opacity: 1;
        transform: none;
    }

    body[data-current-page="home"] *,
    body[data-current-page="home"] *::before,
    body[data-current-page="home"] *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        transition-delay: 0ms;
    }
}

@media print {
    ::view-transition-old(root),
    ::view-transition-new(root),
    body[data-current-page="home"] *,
    body[data-current-page="home"] *::before,
    body[data-current-page="home"] *::after {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* =================================================================
   KORU LOADER — Te Toi's logarithmic spiral loading animation
   A glowing teal segment spirals endlessly inward while the whole
   koru rotates. Two non-synced animation periods (3s dash, 5s rotate)
   create a long-cycle visual rhythm.
   ================================================================= */

.tka-koru-loader {
    position: fixed;
    inset: 0;
    z-index: 9900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.tka-koru-loader.tka-kl-done {
    opacity: 0;
}

.tka-koru-loader.tka-kl-pending {
    opacity: 0;
}

.tka-koru-svg {
    animation: tka-kl-rotate 5s linear infinite;
    transform-origin: center;
    filter: drop-shadow(0 0 10px rgba(15, 118, 110, 0.35))
            drop-shadow(0 0 3px rgba(15, 118, 110, 0.6));
    overflow: visible;
}

@keyframes tka-kl-rotate {
    to { transform: rotate(360deg); }
}

.tka-kl-track {
    fill: none;
    stroke: rgba(15, 118, 110, 0.12);
    stroke-linecap: round;
    stroke-width: 1.5;
}

.tka-kl-path {
    fill: none;
    stroke: #0f766e;
    stroke-linecap: round;
    stroke-width: 2.8;
    /* dasharray + dashoffset set by JS from getTotalLength() */
}

.tka-koru-label {
    margin-top: 1.2rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: #0f766e;
    letter-spacing: 0.08em;
    opacity: 0.7;
    font-family: 'Outfit', 'Inter', sans-serif;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .tka-koru-loader { display: none !important; }
}