/* Extras > Gift Timer overlay (docs/gift-timer.md) — recommended 1080×600.
 *
 * OBS rule: the page is TRANSPARENT. html/body/.gt-stage never get a fill; only
 * sub-elements paint — the ring card, the flip cards, the warning and the pops.
 * Sizes follow the viewport width so any browser-source size keeps the layout.
 *
 * Two looks on .gt-stage (state.style): .is-ring / .is-flip. */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    scrollbar-width: none;
}
body.is-hidden .gt-stage { visibility: hidden; }
.gt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.gt-stage {
    position: relative;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding: 2vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
    background: transparent;
    font-family: 'Rubik', system-ui, sans-serif;
    color: #ffffff;
}
.gt-stage.is-ring .gt-flip-row,
.gt-stage.is-flip .gt-ring-card { display: none; }

/* ── pops (+30 HOURS / -1 HOURS / STOP) ───────────────────────────────────── */
.gt-pops {
    position: relative;
    width: 100%;
    height: 0;
    display: flex;
    justify-content: center;
}
.gt-pop {
    position: absolute;
    top: 0;
    font-size: 3.2vw;
    font-weight: 900;
    letter-spacing: .2vw;
    white-space: nowrap;
    text-shadow: 0 .3vw .8vw rgba(0, 0, 0, .75);
    animation: gt-pop 1.6s ease-out forwards;
}
.gt-pop.is-add { color: #fde047; }
.gt-pop.is-cut { color: #f87171; }
.gt-pop.is-freeze { color: #93c5fd; }
@keyframes gt-pop {
    0% { opacity: 0; transform: translateY(1.5vw) scale(.7); }
    15% { opacity: 1; transform: translateY(0) scale(1.1); }
    70% { opacity: 1; transform: translateY(-1.5vw) scale(1); }
    100% { opacity: 0; transform: translateY(-3vw) scale(1); }
}

/* ── warning ──────────────────────────────────────────────────────────────── */
.gt-warn {
    min-height: 3.4vw;
    text-align: center;
    font-size: 2.8vw;
    font-weight: 900;
    letter-spacing: .3vw;
    color: #ef4444;
    text-shadow: 0 .2vw .6vw rgba(0, 0, 0, .7);
}
.gt-stage.is-warn .gt-warn { animation: gt-blink 1s steps(2) infinite; }
@keyframes gt-blink { 50% { opacity: .35; } }

/* ── style: ring — three ringed circles, no card behind them. Each circle has
 *    the glow gradient inside the ring at 50% opacity; outside the circles
 *    the page stays transparent ─────────────────────────────────────────── */
.gt-ring-card {
    display: flex;
    gap: 2.4vw;
    padding: 1vw 0;
    filter: drop-shadow(0 .3vw .8vw rgba(0, 0, 0, .45));
}
.gt-ring {
    position: relative;
    width: 25vw;
    height: 25vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.gt-ring::before {
    content: '';
    position: absolute;
    inset: 9%; /* inside the ring (r 44 − half its 6 stroke, of a 100 box) */
    border-radius: 50%;
    background:
        radial-gradient(70% 70% at 70% 100%, rgba(52, 211, 153, .65), rgba(52, 211, 153, 0) 70%),
        radial-gradient(60% 60% at 20% 10%, rgba(168, 85, 247, .55), rgba(168, 85, 247, 0) 70%),
        linear-gradient(160deg, #4c3a7a 0%, #33507e 45%, #2a7f86 100%);
    opacity: .5;
}
.gt-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gt-ring-base,
.gt-ring-fill { fill: none; stroke-width: 6; stroke-dasharray: 3.2 1.4074; }
.gt-ring-base { stroke: rgba(255, 255, 255, .9); }
.gt-ring-fill { stroke: url(#gt-ring-grad); }
.gt-ring-arc { fill: none; stroke: #fff; stroke-width: 10; transition: stroke-dasharray .35s ease; }
.gt-ring b {
    position: relative;
    font: 400 10.5vw/1 'Abril Fatface', Georgia, serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.1vw;
    text-shadow: 0 .3vw .8vw rgba(0, 0, 0, .35);
}
.gt-ring b.is-long { font-size: 8vw; }
.gt-ring i {
    position: relative;
    margin-top: .2vw;
    font: italic 700 3vw/1 'Playfair Display', Georgia, serif;
}

/* ── style: flip — flip-clock cards ──────────────────────────────────────── */
.gt-flip-row { display: flex; gap: 2.6vw; align-items: flex-start; }
.gt-flip-unit { display: flex; flex-direction: column; align-items: center; gap: 2vw; }
.gt-flip-unit > span {
    font: 600 2.6vw/1 'Montserrat', system-ui, sans-serif;
    letter-spacing: .15vw;
    color: #f0a51c;
    text-shadow: 0 .2vw .5vw rgba(0, 0, 0, .6);
}
.gt-flip {
    position: relative;
    width: 27vw;
    height: 29vw;
    perspective: 90vw;
    filter: drop-shadow(0 .8vw 1.4vw rgba(0, 0, 0, .55));
}
.gt-flip[data-len="3"] { width: 38vw; }
.gt-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    backface-visibility: hidden;
}
.gt-top {
    top: 0;
    border-radius: 2vw 2vw 0 0;
    background: linear-gradient(#444447, #2c2c2f);
    box-shadow: inset 0 -.3vw 0 rgba(0, 0, 0, .6);
    transform-origin: 50% 100%;
}
.gt-bot {
    bottom: 0;
    border-radius: 0 0 2vw 2vw;
    background: linear-gradient(#232326, #18181a);
    transform-origin: 50% 0;
}
.gt-half span {
    position: absolute;
    left: 0;
    right: 0;
    height: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 23vw/1 'Oswald', 'Bebas Neue', Impact, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #f4f4f5;
}
.gt-top span { top: 0; }
.gt-bot span { top: -100%; }
.gt-flap-top,
.gt-flap-bot { display: none; z-index: 2; }
.gt-flip.is-flipping .gt-flap-top { display: block; animation: gt-flap-top .28s ease-in forwards; }
.gt-flip.is-flipping .gt-flap-bot { display: block; transform: rotateX(90deg); animation: gt-flap-bot .28s ease-out .28s forwards; }
@keyframes gt-flap-top { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes gt-flap-bot { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

/* Under the warning threshold: digits red. Frozen by a gift: cool blue. */
.gt-stage.is-warn .gt-ring b,
.gt-stage.is-warn .gt-half span { color: #ef4444; }
.gt-stage.is-frozen .gt-ring b,
.gt-stage.is-frozen .gt-half span { color: #bfdbfe; }

.gt-timeup {
    text-align: center;
    font-size: 5vw;
    font-weight: 900;
    letter-spacing: .5vw;
    color: #ef4444;
    text-shadow: 0 .3vw 1vw rgba(0, 0, 0, .75);
}
.gt-timeup[hidden] { display: none; }