/* pmt.moe - frutiger-aero meets moe culture */
/* Palette: #FF8090 warm pink, #FFB060 peach, #80C0FF sky, #3A1830 plum, #30FF80 glitch, #FFF8F0 soft white, #E8D8F0 aero gloss */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: "Nunito", system-ui, sans-serif;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.8;
    color: #3A1830;
    background:
        linear-gradient(
            180deg,
            #FF8090 0%,
            #FFB060 28%,
            #FFF8F0 50%,
            #E8D8F0 72%,
            #80C0FF 100%
        );
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 248, 240, 0.45), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(232, 216, 240, 0.35), transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(128, 192, 255, 0.30), transparent 50%);
    z-index: 0;
    transition: opacity 0.6s ease;
}

/* ===== Nature motifs (floating layer) ===== */
.nature-motifs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.motif {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0.32;
    animation: drift 22s ease-in-out infinite;
    will-change: transform;
}

.motif-flower { width: 20px; height: 20px; opacity: 0.34; }
.motif-leaf   { width: 18px; height: 18px; opacity: 0.30; animation-duration: 18s; }
.motif-star   { width: 14px; height: 14px; opacity: 0.40; animation-duration: 16s; }

@keyframes drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(40px, -30px) rotate(45deg); }
    50%  { transform: translate(-20px, 50px) rotate(120deg); }
    75%  { transform: translate(-50px, -10px) rotate(220deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* ===== Story stream (immersive) ===== */
.story-stream {
    position: relative;
    z-index: 3;
    width: 100%;
}

/* ===== Glow entrance ===== */
.glow-entrance {
    position: relative;
    height: 100vh;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    background:
        linear-gradient(
            150deg,
            #FF8090 0%,
            #FFB060 45%,
            #FFF8F0 80%,
            #80C0FF 100%
        );
    overflow: hidden;
}

.glow-entrance::after {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.06) 0px,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px,
            transparent 3px
        );
    pointer-events: none;
    mix-blend-mode: overlay;
}

.entrance-inner {
    position: relative;
    text-align: center;
    z-index: 2;
    max-width: 720px;
    width: 100%;
}

.domain-title {
    position: relative;
    font-family: "Righteous", "Nunito", sans-serif;
    font-size: clamp(48px, 9vw, 128px);
    color: #3A1830;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.55),
        0 8px 24px rgba(58, 24, 48, 0.18),
        0 0 60px rgba(255, 248, 240, 0.6);
    transform: scale(0.8);
    opacity: 0;
    animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
    display: inline-block;
    overflow: hidden;
    padding: 4px 14px;
    border-radius: 14px;
}

@keyframes bounceIn {
    0%   { transform: scale(0.8); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1.0); opacity: 1; }
}

.title-text {
    position: relative;
    z-index: 2;
}

.title-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0.05) 70%,
        transparent 100%
    );
    transform: skewX(-18deg);
    animation: shineSweep 0.8s ease-out 0.55s 1 forwards;
    z-index: 1;
}

@keyframes shineSweep {
    0%   { left: -120%; }
    100% { left: 220%; }
}

.entrance-tagline {
    margin-top: 24px;
    font-family: "Nunito", sans-serif;
    font-style: italic;
    font-size: 17px;
    color: #3A1830;
    opacity: 0;
    animation: fadeUp 0.7s ease-out 0.9s forwards;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes fadeUp {
    0%   { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.scroll-cue {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    color: #3A1830;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 0.7s ease-out 1.4s forwards;
}

.cue-arrow {
    display: block;
    font-family: "Righteous", sans-serif;
    font-size: 22px;
    margin-bottom: 6px;
    animation: bob 2.2s ease-in-out infinite;
}

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

/* ===== Scenes (story stream) ===== */
.scene {
    position: relative;
    padding: 120px 24px;
    display: flex;
    justify-content: center;
}

.scene--soft  { background: linear-gradient(180deg, transparent, rgba(255, 248, 240, 0.55), transparent); }
.scene--peach { background: linear-gradient(180deg, transparent, rgba(255, 176, 96, 0.18), transparent); }
.scene--mid   { background: linear-gradient(180deg, transparent, rgba(232, 216, 240, 0.55), transparent); }
.scene--cool  { background: linear-gradient(180deg, transparent, rgba(128, 192, 255, 0.22), transparent); }

.scene-inner {
    position: relative;
    width: 100%;
    max-width: 680px;
}

/* Aero gloss panels */
.aero-panel {
    position: relative;
    padding: 48px 44px;
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(232, 216, 240, 0.78) 50%,
            rgba(255, 248, 240, 0.85) 100%
        );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(58, 24, 48, 0.04) inset,
        0 18px 48px rgba(58, 24, 48, 0.10),
        0 4px 12px rgba(58, 24, 48, 0.06);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.aero-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0.05) 70%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 0s;
    z-index: 1;
}

.aero-panel.shine::before {
    animation: shineSweep 1.1s ease-out 1;
}

.aero-panel:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(58, 24, 48, 0.05) inset,
        0 24px 56px rgba(58, 24, 48, 0.14),
        0 6px 16px rgba(58, 24, 48, 0.08);
}

.aero-panel:hover::before {
    animation: shineSweep 1.1s ease-out 1;
}

.aero-panel--quiet {
    background:
        linear-gradient(
            180deg,
            rgba(255, 248, 240, 0.94) 0%,
            rgba(232, 216, 240, 0.66) 100%
        );
}

.scene-title {
    font-family: "Righteous", "Nunito", sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: #3A1830;
    margin-bottom: 22px;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        2px 0 0 rgba(255, 128, 144, 0.18),
        -2px 0 0 rgba(128, 192, 255, 0.18);
    position: relative;
    z-index: 2;
    transition: text-shadow 0.3s ease;
}

.scene-title.shake {
    animation: shake 0.2s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.aero-panel:hover .scene-title {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7),
        3px 0 0 rgba(255, 128, 144, 0.45),
        -3px 0 0 rgba(48, 255, 128, 0.35);
}

.scene-body {
    position: relative;
    z-index: 2;
    color: #3A1830;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.8;
}

.scene-body + .scene-body,
.scene-body + .scene-aside,
.scene-body + .field-list,
.scene-body + .scene-quote,
.scene-body + .thing-grid {
    margin-top: 18px;
}

.scene-aside {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    font-style: italic;
    font-size: 13px;
    color: rgba(58, 24, 48, 0.7);
}

.field-list {
    list-style: none;
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 18px;
    position: relative;
    z-index: 2;
}

.field-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #3A1830;
}

.bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 4px rgba(58, 24, 48, 0.18);
    flex-shrink: 0;
}

.scene-quote {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    padding: 18px 22px;
    border-left: 3px solid #FF8090;
    background: linear-gradient(90deg, rgba(255, 128, 144, 0.10), transparent);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 15px;
    color: #3A1830;
}

.scene-quote cite {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-style: normal;
    color: rgba(58, 24, 48, 0.65);
    letter-spacing: 0.04em;
}

/* ===== Glitch galleries (between scenes) ===== */
.glitch-gallery {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 32px 24px;
    flex-wrap: wrap;
}

.glitch-tile {
    position: relative;
    font-family: "Righteous", sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    color: #3A1830;
    padding: 14px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(232, 216, 240, 0.55));
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 6px 18px rgba(58, 24, 48, 0.10);
    transition: transform 0.3s ease;
}

.glitch-tile::before,
.glitch-tile::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 14px 22px;
    pointer-events: none;
    opacity: 0;
}

.glitch-tile::before {
    color: #FF8090;
    transform: translate(2px, 0);
    mix-blend-mode: multiply;
}

.glitch-tile::after {
    color: #30FF80;
    transform: translate(-2px, 0);
    mix-blend-mode: multiply;
}

.glitch-tile.glitching::before {
    animation: glitchR 0.18s steps(2, end) 1;
}

.glitch-tile.glitching::after {
    animation: glitchG 0.18s steps(2, end) 1;
}

@keyframes glitchR {
    0%   { opacity: 0;   transform: translate(0, 0); }
    20%  { opacity: 0.85; transform: translate(3px, 1px); }
    40%  { opacity: 0.75; transform: translate(-2px, 2px); }
    60%  { opacity: 0.85; transform: translate(2px, -1px); }
    80%  { opacity: 0.6;  transform: translate(-1px, 1px); }
    100% { opacity: 0;   transform: translate(0, 0); }
}

@keyframes glitchG {
    0%   { opacity: 0;   transform: translate(0, 0); }
    20%  { opacity: 0.7;  transform: translate(-3px, -1px); }
    40%  { opacity: 0.8;  transform: translate(2px, -2px); }
    60%  { opacity: 0.7;  transform: translate(-2px, 1px); }
    80%  { opacity: 0.55; transform: translate(1px, -1px); }
    100% { opacity: 0;   transform: translate(0, 0); }
}

.glitch-tile:hover {
    transform: translateY(-2px);
}

/* ===== Thing grid ===== */
.thing-grid {
    position: relative;
    z-index: 2;
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.thing-card {
    padding: 18px;
    border-radius: 16px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(232, 216, 240, 0.66) 100%
        );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 8px 18px rgba(58, 24, 48, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thing-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 12px 24px rgba(58, 24, 48, 0.12);
}

.thing-icon {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 12px rgba(58, 24, 48, 0.10);
    position: relative;
    overflow: hidden;
}

.thing-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%);
}

.thing-name {
    font-family: "Righteous", sans-serif;
    font-size: 18px;
    color: #3A1830;
    margin-bottom: 4px;
}

.thing-blurb {
    font-size: 13px;
    color: rgba(58, 24, 48, 0.78);
    line-height: 1.6;
}

/* ===== End card ===== */
.end-card {
    position: relative;
    padding: 140px 24px 80px;
    background:
        linear-gradient(180deg, rgba(128, 192, 255, 0.35), rgba(255, 128, 144, 0.45)),
        radial-gradient(ellipse at center, rgba(255, 248, 240, 0.6), transparent 70%);
    text-align: center;
    overflow: hidden;
}

.end-card-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.end-mark {
    font-family: "Righteous", sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    color: #3A1830;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.5),
        2px 0 0 rgba(255, 128, 144, 0.25),
        -2px 0 0 rgba(128, 192, 255, 0.25);
    letter-spacing: 0.02em;
}

.end-motif-row {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.end-motif {
    width: 22px;
    height: 22px;
    opacity: 0.7;
    animation: gentleSettle 6s ease-in-out infinite;
}

.end-motif:nth-child(1) { animation-delay: -0.5s; }
.end-motif:nth-child(2) { animation-delay: -1.5s; }
.end-motif:nth-child(3) { animation-delay: -2.5s; }
.end-motif:nth-child(4) { animation-delay: -3.5s; }
.end-motif:nth-child(5) { animation-delay: -4.5s; }

@keyframes gentleSettle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(8deg); }
}

.end-note {
    margin-top: 22px;
    font-style: italic;
    font-size: 14px;
    color: rgba(58, 24, 48, 0.85);
}

/* ===== Scanline / glitch flash ===== */
.scanline {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(58, 24, 48, 0.02) 0px,
            rgba(58, 24, 48, 0.02) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: multiply;
    opacity: 0.6;
}

.glitch-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: linear-gradient(90deg, rgba(48, 255, 128, 0.0), rgba(255, 128, 144, 0.0));
    opacity: 0;
}

.glitch-flash.fire {
    animation: flash 0.1s steps(2, end) 1;
}

@keyframes flash {
    0%   { opacity: 0;   background: rgba(48, 255, 128, 0.0); }
    50%  { opacity: 0.55; background: rgba(48, 255, 128, 0.45); }
    100% { opacity: 0;   background: rgba(255, 128, 144, 0.0); }
}

/* ===== Section transition glitch (applied on scroll) ===== */
.scene.glitch-fire .scene-title,
.glitch-tile.fire-now {
    animation: titleGlitch 0.18s steps(2, end) 1;
}

@keyframes titleGlitch {
    0%   { transform: translate(0, 0); filter: hue-rotate(0deg); }
    20%  { transform: translate(2px, -1px); filter: hue-rotate(40deg); }
    40%  { transform: translate(-2px, 1px); filter: hue-rotate(-30deg); }
    60%  { transform: translate(1px, 2px); filter: hue-rotate(20deg); }
    80%  { transform: translate(-1px, -2px); filter: hue-rotate(-10deg); }
    100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
    .aero-panel { padding: 36px 24px; }
    .scene { padding: 80px 16px; }
    .domain-title { padding: 4px 10px; }
    .glitch-gallery { gap: 10px; padding: 22px 16px; }
    .field-list { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .domain-title { font-size: 56px; }
    .aero-panel { padding: 28px 18px; }
    .scene-title { font-size: 20px; }
}