/* Self-contained on purpose — no webfonts or CDN assets, matching the other
   static pages served by this API.

   Single-screen brand page: animated gradient, floating glows, pin drop +
   pulse, wordmark reveal. No copy beyond the footer. Every color is taken
   from the app: the blues and accent cyan from elPlan-frontend/src/theme
   (primary.default/light/dark, primary.standar), --ink from the dark theme
   background (also the splash backgroundColor in app.json), and the yellow
   glow sampled from icon.png itself. The gradient stays dark in both OS
   themes, which is why the white wordmark (logo_elplan_dark.png) is always
   the right variant. */

:root {
    --primary: #3B82F6;
    --primary-light: #60A5FA;
    --primary-dark: #2563EB;
    --accent: #00B8DB;
    --icon-yellow: #E5E000;
    --ink: #111827;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #FFFFFF;
    /* Oversized gradient panned back and forth = slow ambient color shift. */
    background: linear-gradient(130deg,
        var(--ink) 0%,
        var(--primary-dark) 45%,
        var(--primary) 70%,
        var(--accent) 100%);
    background-size: 300% 300%;
    animation: gradientDrift 18s ease-in-out infinite;
}

@keyframes gradientDrift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== Ambient glows ===== */

.glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    pointer-events: none;
}

.glow-a {
    width: 42vmax;
    height: 42vmax;
    left: -12vmax;
    top: -12vmax;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    animation: floatA 16s ease-in-out infinite;
}

.glow-b {
    width: 36vmax;
    height: 36vmax;
    right: -10vmax;
    bottom: -10vmax;
    background: radial-gradient(circle, var(--icon-yellow), transparent 70%);
    opacity: 0.18;
    animation: floatB 20s ease-in-out infinite;
}

.glow-c {
    width: 28vmax;
    height: 28vmax;
    right: 8vmax;
    top: -14vmax;
    background: radial-gradient(circle, var(--primary-light), transparent 70%);
    animation: floatC 24s ease-in-out infinite;
}

@keyframes floatA {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(6vmax, 4vmax); }
}

@keyframes floatB {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-5vmax, -6vmax); }
}

@keyframes floatC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-4vmax, 5vmax) scale(1.15); }
}

/* ===== Center stage ===== */

.stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.mark {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Pin: drops in with a bounce, then bobs forever. Two nested elements so the
   entrance and the idle float don't fight over `transform`. */
.pin {
    position: relative;
    animation: dropIn 0.9s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.pin-img {
    display: block;
    width: clamp(96px, 18vmin, 150px);
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
    animation: bob 3.2s ease-in-out 1s infinite;
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-40vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Expanding ripple on the "ground" under the pin, echoing the ellipse baked
   into the icon. */
.pin-ring {
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: clamp(70px, 13vmin, 110px);
    height: clamp(18px, 3.4vmin, 28px);
    margin-left: calc(clamp(70px, 13vmin, 110px) / -2);
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    opacity: 0;
    animation: ripple 3.2s ease-out 1s infinite;
}

@keyframes ripple {
    0%   { transform: scale(0.45); opacity: 0.7; }
    70%  { transform: scale(1.5);  opacity: 0; }
    100% { transform: scale(1.5);  opacity: 0; }
}

/* Wordmark: fades up once the pin has landed. The PNG (433x244) carries
   generous transparent padding, hence the negative margin tucking it under
   the pin. */
.brand {
    margin: -3vmin 0 0;
    animation: riseIn 0.8s ease-out 0.55s both;
}

.wordmark {
    display: block;
    width: clamp(220px, 42vmin, 340px);
    max-width: 78vw;
    height: auto;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.25));
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Footer ===== */
/* The footer is the page's ground line: the pin floats above its ripple, and
   everything down here sits on a faint horizon. Quiet, tracked-out type —
   the one accent is the icon's own yellow→cyan, drawn as an underline on
   hover. */

.footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 24px calc(24px + env(safe-area-inset-bottom));
    text-align: center;
    animation: fadeIn 1.2s ease-out 1.2s both;
}

/* Horizon hairline, brightest under the composition, fading to the edges. */
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(460px, 80vw);
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4) 50%,
        transparent);
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 36px;
    row-gap: 10px;
}

.footer-links a {
    position: relative;
    padding: 4px 1px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Underline drawn in the icon's yellow→cyan, left to right on hover. */
.footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--icon-yellow), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #FFFFFF;
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
    transform: scaleX(1);
}

.footer-links a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 5px;
    border-radius: 2px;
}

.footer-brand {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}

.footer-brand .by {
    font-style: italic;
    letter-spacing: 0.04em;
}

.footer .tr4 {
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #FFFFFF;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== Reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
    body,
    .glow,
    .pin,
    .pin-img,
    .brand,
    .footer {
        animation: none;
    }

    .pin-ring {
        animation: none;
        opacity: 0.5;
        transform: scale(1);
    }
}