/* ==========================================================================
   Honor Pools — pokret: ucitavac sa logotipom i 3D bazen na naslovnoj
   Oslanja se na tokene iz app.css (--ease-*, --brand-*, razmaci).
   ========================================================================== */

/* ========================================================================== */
/* 1. ucitavac sa logotipom                                                   */
/* ========================================================================== */
/* Sloj postoji samo kad radi JavaScript (html.js) — bez njega nikad ne smije
   da prekrije sadrzaj. Ako skripta ucitavaca ne stigne, sloj se sam gasi
   poslije 7 sekundi: klasa is-cold ostaje dok JS ne preuzme kontrolu. */
/* Pocetne vrijednosti stoje u najslabijem pravilu, da ih .is-exiting i
   .is-covered mogu pregaziti — inace rupa nikad ne krene da raste. */
.loader {
    --cx: 50%;
    --cy: 50%;
    --px: 50%;
    --py: 50%;
    --hole: -1px;
    --cover: 0px;

    display: none;
}

html.js .loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--white);
    background: radial-gradient(110% 80% at 50% 38%, #1f78a8 0%, #196795 30%, #174a74 62%, #192f54 100%);
}

html.js .loader[hidden],
html.loader-off .loader {
    display: none;
}

html.js .loader.is-cold {
    animation: hp-failsafe 0s linear 7s forwards;
}

@keyframes hp-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Svjetlo koje lagano plovi, kao odsjaj kroz vodu. Samo transform. */
.loader__glow {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 195, 226, 0.22) 0%, rgba(147, 195, 226, 0) 62%);
    pointer-events: none;
}

.loader__glow--a {
    top: -30vmax;
    left: -20vmax;
    animation: hp-drift-a 9s var(--ease-in-out) infinite alternate;
}

.loader__glow--b {
    right: -25vmax;
    bottom: -35vmax;
    animation: hp-drift-b 11s var(--ease-in-out) infinite alternate;
}

@keyframes hp-drift-a {
    to {
        transform: translate3d(14vmax, 10vmax, 0) scale(1.1);
    }
}

@keyframes hp-drift-b {
    to {
        transform: translate3d(-12vmax, -8vmax, 0) scale(0.92);
    }
}

.loader__center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 1.6rem);
    transition:
        transform 700ms var(--ease-out),
        opacity 360ms ease;
}

.loader__mark {
    width: clamp(10rem, 26vw, 18rem);
    height: auto;
    overflow: visible;
}

.loader__word {
    width: clamp(9rem, 22vw, 15rem);
    height: auto;
    overflow: visible;
}

.loader__track,
.loader__flow,
.loader__halo,
.loader__glint {
    fill: none;
    stroke-linecap: round;
}

/* Blijedi otisak znaka — vidi se odmah, pa crtanje ima po cemu da ide */
.loader__track {
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 8.1;
}

/* Voda koja tece kroz petlju. pathLength="100", pa su sve duzine u procentima. */
.loader__flow {
    stroke: url(#hp-flow);
    stroke-width: 8.1;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
}

/* Odsjaj na vrhu toka: tanka bijela crta i siri meki trag ispod nje */
.loader__glint {
    stroke: #ffffff;
    stroke-width: 2.2;
    stroke-dasharray: 4 96;
    stroke-dashoffset: 0;
    opacity: 0;
}

.loader__halo {
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 8.1;
    stroke-dasharray: 9 91;
    stroke-dashoffset: 5;
    opacity: 0;
}

.loader__fill {
    fill: url(#hp-mark);
    opacity: 0;
    transform: scale(0.965);
    transform-box: fill-box;
    transform-origin: center;
    transition:
        opacity 420ms var(--ease-out),
        transform 560ms var(--ease-out);
}

.loader__letter {
    fill: #e4f1fa;
    opacity: 0;
    transform: translateY(55%);
    transform-box: fill-box;
    transition:
        opacity 480ms var(--ease-out),
        transform 640ms var(--ease-out);
    transition-delay: calc(140ms + var(--i) * 38ms);
}

/* ---- prvi ulazak: znak se iscrtava sam od sebe, bez cekanja na JS ---- */
html.loader-full .loader__flow {
    animation: hp-draw 900ms var(--ease-in-out) 120ms forwards;
}

html.loader-full .loader__glint,
html.loader-full .loader__halo {
    animation:
        hp-tip 900ms var(--ease-in-out) 120ms forwards,
        hp-tip-fade 900ms linear 120ms forwards;
}

@keyframes hp-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes hp-tip {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -96;
    }
}

@keyframes hp-tip-fade {
    0% {
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    88% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Stranica jos nije spremna: svjetlo kruzi kroz petlju — to je indikator */
.loader.is-waiting .loader__glint,
.loader.is-waiting .loader__halo {
    opacity: 1;
    animation: hp-chase 1250ms linear infinite;
}

@keyframes hp-chase {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -100;
    }
}

/* ---- spremno: tok se pretvara u pravi znak, slova izranjaju ---- */
.loader.is-ready .loader__fill {
    opacity: 1;
    transform: none;
}

.loader.is-ready .loader__flow {
    opacity: 0;
    transition: opacity 420ms ease 120ms;
}

.loader.is-ready .loader__glint,
.loader.is-ready .loader__halo {
    opacity: 0;
    transition: opacity 200ms ease;
}

.loader.is-ready .loader__letter {
    opacity: 1;
    transform: none;
}

.loader__ripple {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    width: 40vmin;
    height: 40vmin;
    margin: -20vmin 0 0 -20vmin;
    border: 1px solid rgba(228, 241, 250, 0.5);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.25);
    pointer-events: none;
}

.loader.is-ready .loader__ripple {
    animation: hp-ripple 1400ms var(--ease-out) forwards;
}

.loader.is-ready .loader__ripple--late {
    animation-delay: 260ms;
}

@keyframes hp-ripple {
    0% {
        opacity: 0.7;
        transform: scale(0.25);
    }
    100% {
        opacity: 0;
        transform: scale(2.6);
    }
}

/* ---- kratka verzija za svaku sljedecu stranicu: znak je vec tu ---- */
html.loader-quick .loader__fill,
html.loader-reduced .loader__fill,
.loader.is-covering .loader__fill,
html.loader-quick .loader__letter,
html.loader-reduced .loader__letter,
.loader.is-covering .loader__letter {
    opacity: 1;
    transform: none;
    transition: none;
}

html.loader-quick .loader__flow,
html.loader-reduced .loader__flow,
.loader.is-covering .loader__flow {
    opacity: 0;
}

/* ---- izlaz: stranica se otvara iz centra znaka, kao kap koja razmakne vodu ---- */
.loader.is-exiting {
    --hole: 160vmax;
    -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--hole), #000 calc(var(--hole) + 1.5px));
            mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--hole), #000 calc(var(--hole) + 1.5px));
    transition: --hole var(--loader-exit, 900ms) var(--ease-in-out);
    pointer-events: none;
}

.loader.is-exiting .loader__center {
    opacity: 0;
    transform: scale(1.06);
}

/* Bez registrovanih CSS promjenljivih rupa ne moze da se animira — tada blijedi */
html.loader-nohole .loader.is-exiting,
html.loader-reduced .loader.is-exiting {
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 0;
    transition: opacity 260ms ease;
}

/* ---- odlazak na drugu stranicu: talas se siri od mjesta klika ---- */
.loader.is-covering {
    -webkit-clip-path: circle(var(--cover) at var(--px) var(--py));
            clip-path: circle(var(--cover) at var(--px) var(--py));
}

.loader.is-covering.is-covered {
    --cover: 160vmax;
    transition: --cover 440ms var(--ease-in-out);
}

html.loader-nohole .loader.is-covering {
    -webkit-clip-path: none;
            clip-path: none;
    opacity: 0;
}

html.loader-nohole .loader.is-covering.is-covered {
    opacity: 1;
    transition: opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .loader__glow {
        animation: none;
    }
}

/* Ulazna animacija teksta u heroju ceka da se ucitavac otvori — inace bi se
   odigrala ispod sloja i niko je ne bi vidio. Klasu loader-active dodaje tek
   loader.js: ako skripta ne stigne, animacija ide odmah i naslov se vidi. */
html.loader-active:not(.is-revealed) .hero__eyebrow,
html.loader-active:not(.is-revealed) .hero__headline,
html.loader-active:not(.is-revealed) .hero__subline,
html.loader-active:not(.is-revealed) .hero__actions {
    animation-play-state: paused;
}

/* ========================================================================== */
/* 2. 3D bazen na naslovnoj                                                   */
/* ========================================================================== */
/* Bez 3D-a hero izgleda kao i ranije: fotografija preko cijelog ekrana. */
.pool-hero__stage {
    width: 100%;
}

.pool-hero__canvas,
.pool-hero__veil,
.pool-hero__line {
    display: none;
}

/* ---- sa 3D: sekcija je duga, a pozornica se lijepi za ekran ---- */
html.pool-3d .pool-hero {
    display: block;
    height: 320vh;
    min-height: 0;
    padding: 0;
    color: var(--text-strong);
    /* sticky ne radi ako bilo koji roditelj sijece sadrzaj */
    overflow: visible;
}

html.pool-3d .pool-hero__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #eef3f7;
}

html.pool-3d .pool-hero .hero__media {
    display: none;
}

html.pool-3d .pool-hero__canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
}

/* Mekan svijetli veo lijevo: naslov stoji na mirnom kamenu, ne preko vode */
html.pool-3d .pool-hero__veil {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(244, 247, 250, 0.82) 0%, rgba(244, 247, 250, 0.42) 30%, rgba(244, 247, 250, 0) 52%),
        linear-gradient(180deg, rgba(244, 247, 250, 0.55) 0%, rgba(244, 247, 250, 0) 16%);
}

/* Tekst prati lijevu ivicu zaglavlja; desna polovina pripada bazenu */
html.pool-3d .pool-hero .hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    padding-top: 5rem;
    will-change: opacity, transform;
}

html.pool-3d .pool-hero .hero__inner > * {
    max-width: 34rem;
}

html.pool-3d .pool-hero .hero__eyebrow {
    color: var(--accent);
}

html.pool-3d .pool-hero .hero__headline {
    color: var(--brand-navy);
    font-size: clamp(2.6rem, 1.2rem + 3.6vw, 4.4rem);
    text-wrap: balance;
}

html.pool-3d .pool-hero .hero__subline {
    color: var(--text-muted);
}

/* Dugmad na svijetloj pozadini: puno teget i obrubljeno */
html.pool-3d .pool-hero .hero__btn-primary {
    --btn-bg: var(--brand-navy);
    --btn-fg: var(--white);
}

html.pool-3d .pool-hero .hero__btn-secondary {
    --btn-bg: rgba(255, 255, 255, 0.6);
    --btn-fg: var(--brand-navy);
    --btn-border: rgba(25, 47, 84, 0.25);
}

@media (hover: hover) and (pointer: fine) {
    html.pool-3d .pool-hero .hero__btn-primary:hover {
        --btn-bg: var(--brand-blue);
    }

    html.pool-3d .pool-hero .hero__btn-secondary:hover {
        --btn-border: var(--brand-navy);
        --btn-bg: var(--white);
    }
}

/* Recenice koje se smjenjuju dok kamera ide ka vodi. JS vodi providnost,
   pomjeraj i zamucenje; do tada su sakrivene da ne trepnu. */
html.pool-3d .pool-hero__line {
    display: block;
    position: absolute;
    top: clamp(6.5rem, 13vh, 9.5rem);
    left: 0;
    right: 0;
    z-index: 2;
    max-width: 17ch;
    margin: 0 auto;
    padding-inline: 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 1.3rem + 3.8vw, 4.8rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-align: center;
    text-wrap: balance;
    color: var(--brand-navy);
    text-shadow: 0 1px 28px rgba(244, 247, 250, 0.95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: opacity, transform, filter;
}

html.pool-3d .pool-hero .hero__scroll {
    background: rgba(25, 47, 84, 0.16);
    z-index: 2;
}

html.pool-3d .pool-hero .hero__scroll-line {
    background: var(--brand-navy);
}

/* Oznake stanica dolje desno: broj i crtica, aktivna je puna i u boji
   brenda. Animiraju se samo transform i providnost. */
.pool-stations {
    display: none;
}

html.pool-3d .pool-stations {
    position: absolute;
    right: clamp(1rem, 0.5rem + 1.6vw, 2.25rem);
    bottom: clamp(1.25rem, 4vh, 2.5rem);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.pool-stations__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
    border: 0;
    background: none;
    color: var(--brand-navy);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pool-stations__num {
    opacity: 0.4;
    transition: opacity 300ms var(--ease-out);
}

.pool-stations__bar {
    display: block;
    width: 2.5rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.25;
    transform: scaleX(0.4);
    transform-origin: right center;
    transition:
        transform 500ms var(--ease-out),
        opacity 300ms var(--ease-out),
        background-color 300ms var(--ease-out);
}

.pool-stations__item.is-active .pool-stations__num {
    opacity: 1;
}

.pool-stations__item.is-active .pool-stations__bar {
    background: var(--brand-blue);
    opacity: 1;
    transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
    .pool-stations__item:not(.is-active):hover .pool-stations__num {
        opacity: 0.75;
    }

    .pool-stations__item:not(.is-active):hover .pool-stations__bar {
        opacity: 0.55;
        transform: scaleX(0.65);
    }
}

.pool-stations__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Zaglavlje preko svijetle scene: tamni tekst, logotip u originalnim bojama */
html.pool-3d .page-home .site-header:not(.is-stuck) {
    --header-fg: var(--text-strong);
    --header-fg-muted: var(--text-muted);
    --header-line: var(--line);
}

html.pool-3d .page-home .site-header:not(.is-stuck) .site-header__logo img {
    filter: none;
}

html.pool-3d .page-home .site-header:not(.is-stuck) .site-nav__link.is-active {
    color: var(--accent);
}

html.pool-3d .page-home .site-header:not(.is-stuck) .lang-switch__item.is-active {
    background: var(--brand-blue);
    color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
    html.pool-3d .page-home .site-header:not(.is-stuck) .site-nav__link:hover {
        color: var(--accent);
        background: var(--blue-50);
    }
}

/* ---- telefon: bazen gore preko cijele sirine, tekst ispod ---- */
@media (max-width: 767px) {
    html.pool-3d .pool-hero {
        height: 260vh;
    }

    html.pool-3d .pool-hero__stage {
        align-items: flex-end;
    }

    html.pool-3d .pool-hero .hero__inner {
        padding-bottom: clamp(4.5rem, 12vh, 7rem);
    }

    html.pool-3d .pool-hero__veil {
        background: linear-gradient(0deg, rgba(244, 247, 250, 0.9) 0%, rgba(244, 247, 250, 0.55) 30%, rgba(244, 247, 250, 0) 52%);
    }

    /* Na telefonu samo crtice uz desnu ivicu — brojevi bi pokrili dugmad */
    html.pool-3d .pool-stations {
        right: 0.9rem;
        bottom: 1.1rem;
    }

    .pool-stations__num {
        display: none;
    }

    .pool-stations__bar {
        width: 1.25rem;
    }
}

/* ========================================================================== */
/* 3. Sloj zemlje ispod 3D scene                                              */
/* ========================================================================== */
/* Jednostavan presjek tla: kamena traka, linija tla i slojevi zemlje koji
   blijede u pozadinu. Staticno, bez animacije. */
.descent {
    height: clamp(5.5rem, 9vw, 8.5rem);
    overflow: hidden;
    background: var(--bg);
}

.descent__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.descent__paving {
    fill: #e7e7e3;
}

.descent__ground {
    fill: none;
    stroke: var(--brand-navy);
    stroke-opacity: 0.8;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.descent__layer--1 {
    fill: #e4ded2;
}

.descent__layer--2 {
    fill: #d6cdbb;
}

.descent__layer--3 {
    fill: #c5b9a3;
}

/* ---- telefon: samo pocetni kadar, heroj visok jedan ekran ---- */
/* Kamera ne prati skrol, pa nema ni duge sekcije, ni recenica sa stanica,
   ni oznaka 01/02/03 — stranica se skroluje normalno. */
html.pool-3d.pool-static .pool-hero {
    height: 100vh;
    height: 100svh;
}

html.pool-3d.pool-static .pool-hero__line,
html.pool-3d.pool-static .pool-stations {
    display: none;
}