/* Toy collection page only (igrace.html): tin-toy train motion graphics.
   Loaded after vsebina.css; driven by js/igrace.js. */

:root {
    --toy-red: #D63A2F;
    --toy-green: #2F8F6B;
    --toy-cream: #F4EAD2;
    --felt: #6FA35E;
}

/* Opening date reads as a plain note, not a shouted label */
.page-eyebrow {
    text-transform: none;
    letter-spacing: 0.3px;
    font-size: 0.95rem;
}

/* ---------- Hero: side-view train arriving on the rail ---------- */
.page-hero {
    padding-bottom: 200px;
}

/* Rail seen from the side: rail on top, sleepers underneath */
.hero-track {
    height: 12px;
    background:
        linear-gradient(var(--gold), var(--gold)) top / 100% 3px no-repeat,
        repeating-linear-gradient(90deg, rgba(249, 168, 38, 0.55) 0 16px, transparent 16px 28px) bottom / 100% 7px no-repeat;
    opacity: 0.8;
}

.side-train {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: clamp(260px, 36vw, 520px);
    z-index: 2;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(-120%, 0, 0);
}

.side-train svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Steam puffs live in page space so they stay behind as the train moves */
.tt-puff {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(244, 234, 210, 0.55) 50%, rgba(244, 234, 210, 0) 72%);
    filter: blur(1px);
    pointer-events: none;
    z-index: 0; /* above the hero background, behind the text and buttons */
    animation: tt-puff 1.8s ease-out forwards;
}

@keyframes tt-puff {
    from {
        transform: translate(0, 0) scale(0.4);
        opacity: 0.95;
    }

    to {
        transform: translate(var(--drift, -30px), -60px) scale(2.6);
        opacity: 0;
    }
}

/* ---------- Tabletop train set with a level crossing ---------- */
.toy-layout {
    position: relative;
    height: 280vh;
    background:
        repeating-linear-gradient(0deg, transparent 0 62px, rgba(14, 19, 37, 0.045) 62px 64px),
        var(--paper-2);
}

/* Only shown once the script has drawn it */
.toy-layout:not(.is-ready) {
    display: none;
}

.toy-layout-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 120px 20px 40px;
    overflow: hidden;
}

.toy-layout-scene {
    width: min(1100px, 100%);
}

.td-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 260px);
    filter: drop-shadow(0 22px 34px rgba(14, 19, 37, 0.22));
}

.toy-layout-caption {
    max-width: 640px;
    text-align: center;
    color: var(--navy);
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    font-weight: 600;
    line-height: 1.5;
    text-wrap: balance;
}

.toy-layout-hint {
    position: absolute;
    top: 118px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: var(--toy-cream);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 50px;
    white-space: nowrap;
    z-index: 2;
    transition: opacity 0.4s ease;
}

.toy-layout-hint.is-hidden {
    opacity: 0;
}

/* Crossing lamps blink alternately while a train is coming */
.td-lamp {
    fill: #5A1F1C;
}

.td-svg.is-warning .td-lamp {
    animation: td-blink 0.9s steps(1) infinite;
}

.td-svg.is-warning .td-lamp.b {
    animation-delay: 0.45s;
}

@keyframes td-blink {
    0% {
        fill: #FF4B3E;
    }

    50% {
        fill: #5A1F1C;
    }
}

.td-glow {
    opacity: 0;
}

.td-svg.is-warning .td-glow {
    animation: td-glow 0.9s steps(1) infinite;
}

.td-svg.is-warning .td-glow.b {
    animation-delay: 0.45s;
}

@keyframes td-glow {
    0% {
        opacity: 0.55;
    }

    50% {
        opacity: 0;
    }
}

.td-puff {
    fill: rgba(244, 234, 210, 0.95);
    transform-box: fill-box;
    transform-origin: center;
    animation: td-puff 1.6s ease-out forwards;
}

@keyframes td-puff {
    from {
        transform: scale(0.3);
        opacity: 0.95;
    }

    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* Reduced motion: a still picture instead of a scroll scene */
.toy-layout.is-static {
    height: auto;
}

.toy-layout.is-static .toy-layout-stage {
    position: static;
    height: auto;
    padding: 80px 20px;
}

.toy-layout.is-static .toy-layout-hint {
    display: none;
}

@media (max-width: 768px) {
    .page-hero {
        padding-bottom: 150px;
    }

    .toy-layout {
        height: 250vh;
    }

    .toy-layout-stage {
        padding: 100px 16px 30px;
        gap: 18px;
    }

    .toy-layout-hint {
        top: 96px;
        font-size: 0.78rem;
    }

    .td-svg {
        max-height: calc(100vh - 240px);
    }
}