/* =================================================================
   FIDORA · shared loader
   Brand: editorial monochrome, narrative, 3D-stack language.
   No pulse. No wordmark. Single F, rotating copy, hairline fill.
   ================================================================= */

:root{
    --ldr-bg:#000;
    --ldr-fg:#fff;
    --ldr-fg-soft:#6a6a6a;
    --ldr-fg-mute:#9a9a9a;
    --ldr-line:rgba(255,255,255,.10);
    --ldr-line-2:rgba(255,255,255,.20);
    --ldr-ease:cubic-bezier(.22,1,.36,1);
    --ldr-ff-sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --ldr-ff-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── shell ───────────────────────────────────────────────────── */
.fidora-loader{
    position:fixed;inset:0;z-index:99999;
    background:var(--ldr-bg);
    color:var(--ldr-fg);
    perspective:1400px;
    perspective-origin:50% 50%;
    overflow:hidden;
    opacity:1;
    transition:opacity .55s var(--ldr-ease), visibility 0s linear .55s;
}
.fidora-loader.is-gone{
    opacity:0;visibility:hidden;pointer-events:none;
}

/* soft vignette + grid */
.fidora-loader::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(120% 90% at 50% 50%,#000 30%,transparent 82%);
            mask-image:radial-gradient(120% 90% at 50% 50%,#000 30%,transparent 82%);
}
.fidora-loader::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 50% at 50% 50%,transparent 0%,rgba(0,0,0,.55) 100%);
}

/* ── corner index marks (editorial) ─────────────────────────── */
.fldr-mark{
    position:absolute;
    font-family:var(--ldr-ff-mono);
    font-size:10px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--ldr-fg-soft);
    display:flex;align-items:center;gap:10px;
    z-index:3;
}
.fldr-mark::before{
    content:"";width:22px;height:1px;background:var(--ldr-line-2);
}
.fldr-mark--tl{top:24px;left:24px}
.fldr-mark--tr{top:24px;right:24px}
.fldr-mark--tr::before{order:2}
.fldr-mark--tr::after{content:"";width:22px;height:1px;background:var(--ldr-line-2)}
.fldr-mark--bl{bottom:24px;left:24px}
.fldr-mark--br{bottom:24px;right:24px}
.fldr-mark--br::before{order:2}
.fldr-mark--br::after{content:"";width:22px;height:1px;background:var(--ldr-line-2)}

@media (max-width:640px){
    .fldr-mark{font-size:9px;letter-spacing:.22em}
    .fldr-mark--tl,.fldr-mark--bl{left:16px}
    .fldr-mark--tr,.fldr-mark--br{right:16px}
    .fldr-mark--tl,.fldr-mark--tr{top:16px}
    .fldr-mark--bl,.fldr-mark--br{bottom:16px}
}

/* ── core composition ────────────────────────────────────────── */
.fldr-stage{
    position:relative;z-index:2;
    width:100%;max-width:780px;
    padding:0 clamp(24px,5vw,60px);
    margin:auto;                 /* robust centering inside the flex parent */
    display:flex;flex-direction:column;align-items:center;
    transform-style:preserve-3d;
    /* No transition during entry — JS owns tilt via a child wrapper below
       so it never fights the entrance keyframe. */
    transform:translate3d(0,0,0);
    will-change:transform;
    animation:fldrIn 1.1s var(--ldr-ease) both;
}
@keyframes fldrIn{
    0%  {opacity:0; transform:translate3d(0,18px,0)}
    100%{opacity:1; transform:translate3d(0,0,0)}
}

/* Tilt wrapper — sits inside the stage, JS targets this only.
   Keeping the entrance animation on .fldr-stage guarantees
   the composition lands centered and stays centered. */
.fldr-tilt{
    display:flex;flex-direction:column;align-items:center;gap:34px;
    width:100%;
    transform-style:preserve-3d;
    transform:rotateX(0) rotateY(0);
    transition:transform .25s var(--ldr-ease);
    will-change:transform;
}

/* ── single F (the only brand mark) ─────────────────────────── */
.fldr-mark3d{
    position:relative;
    transform-style:preserve-3d;
    transform:translate3d(0,0,40px);
}
.fldr-f{
    display:block;
    width:clamp(96px,14vw,140px);
    height:auto;
    filter:invert(1) drop-shadow(0 18px 40px rgba(255,255,255,.10));
}
.fldr-mark3d::before,
.fldr-mark3d::after{
    content:"";position:absolute;left:50%;top:50%;
    width:1px;background:var(--ldr-line);
    transform-origin:top center;
}
.fldr-mark3d::before{
    height:130px;transform:translate(-50%,-50%) rotate(-32deg);
    opacity:.55;
}
.fldr-mark3d::after{
    height:130px;transform:translate(-50%,-50%) rotate(32deg);
    opacity:.55;
}

/* ── narrative copy (rotating declarative line) ──────────────── */
.fldr-copy{
    text-align:center;
    color:var(--ldr-fg);
    font-family:var(--ldr-ff-sans);
    font-weight:300;
    font-size:clamp(20px,2.4vw,28px);
    line-height:1.35;
    letter-spacing:-0.01em;
    min-height:2.7em;
    max-width:36ch;
}
.fldr-copy em{
    font-style:italic;font-weight:400;color:var(--ldr-fg-mute);
}
.fldr-line{
    display:block;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .55s var(--ldr-ease), transform .55s var(--ldr-ease);
}
.fldr-line.is-on{
    opacity:1;transform:translateY(0);
}
.fldr-line.is-out{
    opacity:0;transform:translateY(-8px);
}

/* ── eyebrow + hairline rule ────────────────────────────────── */
.fldr-eyebrow{
    font-family:var(--ldr-ff-mono);
    font-size:10px;letter-spacing:.34em;text-transform:uppercase;
    color:var(--ldr-fg-soft);
    margin:0;
}
.fldr-rule{
    width:clamp(220px,46vw,300px);
    height:1px;
    background:rgba(255,255,255,.14);
    position:relative;overflow:hidden;
}
.fldr-rule i{
    position:absolute;left:0;top:0;bottom:0;width:0;
    background:#fff;
    animation:fldrFill 1.8s var(--ldr-ease) forwards;
}
@keyframes fldrFill{
    0%  {width:0%}
    60% {width:78%}
    100%{width:100%}
}

/* ── scroll hint (echoes hero scroll line) ──────────────────── */
.fldr-scrollhint{
    position:absolute;left:50%;bottom:64px;
    transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    font-family:var(--ldr-ff-mono);
    font-size:9px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--ldr-fg-soft);
    z-index:3;
}
.fldr-scrollhint .line{
    width:1px;height:38px;
    background:linear-gradient(180deg,var(--ldr-line-2) 0%,transparent 100%);
    position:relative;overflow:hidden;
}
.fldr-scrollhint .line::after{
    content:"";position:absolute;left:0;top:0;width:100%;height:50%;
    background:linear-gradient(180deg,#fff 0%,transparent 100%);
    animation:fldrScrollLine 2.2s var(--ldr-ease) infinite;
}
@keyframes fldrScrollLine{
    0%  {transform:translateY(-100%)}
    100%{transform:translateY(200%)}
}
@media (max-width:640px){
    .fldr-scrollhint{bottom:48px}
}

/* ── states ──────────────────────────────────────────────────── */
.fidora-loader[data-state="done"] .fldr-rule i{
    animation:none;width:100%;
}

@media (prefers-reduced-motion:reduce){
    .fldr-stage,.fldr-mark3d{animation:none;transform:none}
    .fldr-rule i{animation:none;width:100%}
    .fldr-scrollhint .line::after{animation:none;opacity:.4}
    .fldr-line{transition:none}
}