/* ============================================================================
   4Scenes Iberia - MOTION LAYER (realm-fx.css)
   ---------------------------------------------------------------------------
   Additive only. Loads AFTER realm.css and the page sheet and uses only their
   tokens. Nothing here changes layout, colour identity or a server contract;
   it only makes the existing surfaces feel alive. Everything is
   transform/opacity/filter (GPU-cheap), and every animation is disabled under
   prefers-reduced-motion at the foot of this file. realm-fx.js skips its
   canvas and scroll work under the same media query.
   ========================================================================= */

/* ------------------------------------------------ the forge: embers */
/* The ember canvas is injected by realm-fx.js into .feature-art (home). */
.feature-art .fx-embers { opacity: .9; }

/* warm glow that breathes over the forge mouth, right of the blacksmith */
.feature-art::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 14%;
    top: 46%;
    width: 40%;
    height: 48%;
    transform: translate(0, -50%);
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 176, 92, .5) 0%, rgba(233, 146, 100, .28) 42%, transparent 74%);
    filter: blur(6px);
    mix-blend-mode: screen;
    animation: forge-flicker 3.1s ease-in-out infinite;
    will-change: opacity, transform;
}
@keyframes forge-flicker {
    0%   { opacity: .55; transform: translate(0, -50%) scale(1); }
    18%  { opacity: .92; transform: translate(0, -50%) scale(1.05); }
    34%  { opacity: .62; transform: translate(-1%, -50%) scale(1.01); }
    52%  { opacity: 1;   transform: translate(1%, -50%) scale(1.07); }
    70%  { opacity: .68; transform: translate(0, -50%) scale(1.02); }
    100% { opacity: .55; transform: translate(0, -50%) scale(1); }
}

/* --------------------------------------------------- hero: drift */
/* --fx-parallax is set by realm-fx.js on scroll; the title block drifts a
   few pixels against the painting. */
.hero-inner { transform: translateY(var(--fx-parallax, 0px)); will-change: transform; }

/* slow gold shimmer across the hero title */
.hero h1 .gilt {
    background-size: 200% 100%;
    animation: fx-gilt 6s var(--ease) infinite;
}
@keyframes fx-gilt {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ------------------------------------------------------ reveal upgrade */
.js .reveal[data-fx="left"]  { transform: translateX(-22px); }
.js .reveal[data-fx="right"] { transform: translateX(22px); }
.js .reveal[data-fx].in      { animation: fx-slide-in var(--t-slow) var(--ease-out) forwards; animation-delay: var(--reveal-delay, 0ms); }
@keyframes fx-slide-in { from { opacity: 0; } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- stat cards */
.stat { transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); will-change: transform; }
.stat:hover { transform: translateY(-4px); border-color: var(--line-hot); box-shadow: var(--sh3), var(--gold-glow), inset 0 1px 0 var(--sheen); }
.stat .stat-value { transition: text-shadow var(--t) var(--ease); }
.stat:hover .stat-value { text-shadow: 0 0 18px rgba(230, 192, 106, .55); }
.stat-value.is-counting { color: var(--gold-bright); }

/* --------------------------------------------------- loading shimmer */
.fx-skeleton {
    position: relative;
    color: transparent !important;
    border-radius: var(--r-sm);
    background: linear-gradient(100deg, rgba(160, 190, 225, .08) 30%, rgba(230, 192, 106, .18) 50%, rgba(160, 190, 225, .08) 70%);
    background-size: 220% 100%;
    animation: fx-shimmer 1.25s ease-in-out infinite;
}
.fx-skeleton * { visibility: hidden; }
@keyframes fx-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* online heartbeat: a second expanding ring on the status dot */
.status-strip.is-online .status-main .dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: fx-ping 2.6s var(--ease) infinite;
}
@keyframes fx-ping {
    0%   { box-shadow: 0 0 0 0 rgba(111, 211, 154, .45); }
    70%  { box-shadow: 0 0 0 12px rgba(111, 211, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 211, 154, 0); }
}

/* -------------------------------------------------- cash-shop cards */
.item-card:hover .item-icon-wrap { transform: scale(1.08); }
.item-icon-wrap img { transition: filter var(--t) var(--ease), transform var(--t) var(--ease-out); }
.item-card:hover .item-icon-wrap img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .7)) brightness(1.08) saturate(1.08); }

/* --------------------------------------------------- forms: focus life */
.form-group { position: relative; }
.form-group label { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out); transform-origin: left center; }
.form-group:focus-within label { color: var(--gold-bright); transform: translateY(-1px); }

/* invalid shake: JS adds .fx-shake to the .form-card on a client-side reject */
.fx-shake { animation: fx-shake .4s var(--ease) both; }
@keyframes fx-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

/* button ripple: a soft radial press feedback (JS sets --fx-x/--fx-y) */
.btn.fx-rippling::before,
.shop-btn.fx-rippling::before {
    content: "";
    position: absolute;
    left: var(--fx-x, 50%);
    top: var(--fx-y, 50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 70%);
    animation: fx-ripple .6s var(--ease-out) forwards;
    pointer-events: none;
}
@keyframes fx-ripple { to { transform: translate(-50%, -50%) scale(34); opacity: 0; } }

/* ---------------------------------------------------- page transition */
.page-enter { animation: fx-page-enter var(--t-slow) var(--ease-out) both; }
@keyframes fx-page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.fx-leaving body { opacity: 0; transition: opacity var(--t) var(--ease); }

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
    .feature-art .fx-embers { display: none !important; }
    .feature-art::after,
    .status-strip.is-online .status-main .dot::after,
    .hero h1 .gilt,
    .fx-skeleton,
    .page-enter { animation: none !important; }
    .hero-inner { transform: none !important; }
    .stat:hover, .item-card:hover { transform: none; }
    .fx-shake { animation: none !important; }
    .btn.fx-rippling::before, .shop-btn.fx-rippling::before { display: none !important; }
    html.fx-leaving body { opacity: 1 !important; }
    .fx-skeleton { color: inherit !important; background: none !important; }
}