/* ===== UNDERGUIDE – Mint / Forest Green ===== */
/*
   Partner: Budapest Underguide (underguide.com)
   Stílus: prémium menta-zöld, arany akcentusok, lava-lamp blob animáció
*/

@import url('/public/stylesheets/universum8_common.css');

/* Alap színek */
:root {
    --bg1: #60E5AC;      /* alul – mély smaragdzöld */
    --bg2: #60E5AC;      /* felül – fő brand szín */

    --card: #ffffff;
    --ink: #0d2b1e;
    --muted: #3d6655;
    --line: #c2f0da;

    --accent-light: #333;
    --accent-normal: #222;
    --accent-dark: #111;

    --danger-light: #ff7b7f;
    --danger-normal: #e5484d;
    --danger-dark: #E5484D7F;

    --shadow: 0;
    --radius: 10px;
    --radius-sm: 10px;
    --radius-lg: 22px;

    --card-bg: #ffffff;
    --text: #1a1a2e;
}

/* Háttér gradiens */
body {
    background: linear-gradient(180deg, var(--bg2), var(--bg1)) fixed;
}

/* ==== LAVA / BLOB HÁTTÉR – menta tónusok ==== */

body > * { position: relative; z-index: 1; }

body {
    position: relative;
    background: linear-gradient(180deg, var(--bg2), var(--bg1)) fixed !important;
    overflow: auto;
}

:root {
    --lava-blur: 80px;
    --lava-opacity: 0.85;
    --lava-speed-1: 5s;
    --lava-speed-2: 9s;
    --lava-speed-3: 14s;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    filter: blur(var(--lava-blur));
}

body::before {
    opacity: var(--lava-opacity);
    background:
        radial-gradient(65% 55% at 18% 80%, rgba(96, 229, 172, 0.70) 0%, rgba(96, 229, 172, 0) 62%),
        radial-gradient(60% 50% at 82% 75%, rgba(26, 122, 88, 0.65) 0%, rgba(26, 122, 88, 0) 60%);
    animation: ugBlobA var(--lava-speed-1) ease-in-out infinite alternate;
}

body::after {
    opacity: calc(var(--lava-opacity) * 0.8);
    background:
        radial-gradient(70% 60% at 50% 110%, rgba(46, 201, 138, 0.30) 0%, rgba(46, 201, 138, 0) 72%);
    animation: ugBlobB var(--lava-speed-2) ease-in-out infinite alternate;
}

@keyframes ugBlobA {
    0%   { transform: translate3d(-4%,  3%, 0) scale(1.00) rotate(0.3deg); }
    50%  { transform: translate3d( 3%, -4%, 0) scale(1.10) rotate(-0.4deg); }
    100% { transform: translate3d(-2%,  1%, 0) scale(1.05) rotate(0.1deg); }
}

@keyframes ugBlobB {
    0%   { transform: translate3d( 2%,  2%, 0) scale(1.00); }
    50%  { transform: translate3d(-3%, -3%, 0) scale(1.08); }
    100% { transform: translate3d( 1%,  1%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none !important; }
}

/* ==== IZOMETRIKUS RÁCS ==== */
:root {
    --grid-line: rgba(50, 50, 50, 0.28);
    --grid-size: 200px;
    --grid-line-w: 2px;
}

html::after {
    content: "";
    position: fixed;
    bottom: -15vh;
    height: 60vh;
    left: -1vw;
    right: -5vw;
    transform: perspective(1200px) rotateX(65deg);
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to right,
            transparent 0 calc(var(--grid-size) - var(--grid-line-w)),
            var(--grid-line) calc(var(--grid-size) - var(--grid-line-w)) var(--grid-size)
        ),
        repeating-linear-gradient(
            to top,
            transparent 0 calc(var(--grid-size) - var(--grid-line-w)),
            var(--grid-line) calc(var(--grid-size) - var(--grid-line-w)) var(--grid-size)
        );
    -webkit-mask-image: linear-gradient(to top,
        rgba(0,0,0,1) 15%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 90%);
    mask-image: linear-gradient(to top,
        rgba(0,0,0,1) 15%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 90%);
    z-index: 0;
}

/* ==== LOGO ==== */
.logo {
    width: 15vw;
}

/* ==== POLAROID – image-manipulation page ==== */

/* #manipulation-container: a .photo-container shared rule ad rá border-t, azt nullázzuk */
#manipulation-container {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* A külső .container átlátszó – csak a #photo-wrapper legyen a fehér keret */
body.image-manipulation-page .container {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* #photo-wrapper mint polaroid: egyenlő oldalsó/felső padding, vastagabb fehér aljzat a feliratnak */
body.image-manipulation-page #photo-wrapper {
    --manip-photo-frame: 16px;
    padding: var(--manip-photo-frame) var(--manip-photo-frame) 56px;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* A fotó felirat a polaroid fehér aljára kerül */
body.image-manipulation-page #photo-wrapper .characterAndBackgroundName {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: clamp(12px, 1.4vh, 18px);
    font-weight: 700;
    color: #0d2b1e;
}