/* ============================================================================
   GWEN — PHOTOGRAPHE
   Récit cinématique · plein écran, chapitres, transitions typées par thème
   (Pour la maintenance courante : tout se fait dans js/config.js)
   ========================================================================== */

/* ----------  CHARTE & VARIABLES  ---------- */
:root {
    --forest:   #23322B;
    --pink:     #D8A8A8;
    --sage:     #5A766A;
    --bordeaux: #50303B;
    --cream:    #F9EFED;

    --ink:    #14110f;
    --ink-2:  #0c0a09;

    --cream-60: rgba(249, 239, 237, 0.6);
    --cream-40: rgba(249, 239, 237, 0.4);
    --cream-15: rgba(249, 239, 237, 0.15);

    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans:  'Inter', system-ui, sans-serif;

    --accent: var(--sage);          /* couleur du thème courant (défini par JS) */
    --accent-text: var(--sage);     /* version éclaircie, lisible                */
}

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

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #000;
    color: var(--cream);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { display: block; }


/* ============================================================================
   INTRO
   ========================================================================== */
.intro {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse 80% 70% at 50% 42%, rgba(216,168,168,0.10) 0%, transparent 70%),
        linear-gradient(160deg, var(--forest) 0%, var(--ink-2) 100%);
    transition: opacity 1.2s ease, visibility 1.2s ease;
}
.intro.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-inner { text-align: center; padding: 6vw; }
.intro-mark { opacity: 0; transform: translateY(18px); animation: rise 1.4s cubic-bezier(.22,1,.36,1) forwards 0.3s; }
.intro-name {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(3.2rem, 9vw, 6.5rem); letter-spacing: 0.3em; color: var(--cream);
    margin-top: 0.4rem; opacity: 0; transform: translateY(18px);
    animation: rise 1.4s cubic-bezier(.22,1,.36,1) forwards 0.7s;
}
.intro-tag {
    font-size: 0.62rem; letter-spacing: 0.6em; text-transform: uppercase; color: var(--pink);
    margin-top: 0.6rem; opacity: 0; animation: rise 1.2s ease forwards 1.2s;
}
.intro-rule {
    width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--pink), transparent);
    margin: 2.4rem auto 0; animation: grow 1.1s ease forwards 1.7s;
}
.intro-enter {
    margin-top: 3rem; padding: 0.95rem 2.4rem;
    font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--cream);
    border: 1px solid var(--cream-40); border-radius: 40px; opacity: 0;
    animation: rise 1s ease forwards 2.4s;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.intro-enter:hover { background: var(--pink); border-color: var(--pink); color: var(--forest); }


/* ----------  MONOGRAMME  ---------- */
.mono { display: inline-flex; font-family: var(--serif); font-weight: 400; line-height: 1; color: var(--cream); }
.intro-mark .mono { font-size: clamp(3rem, 7vw, 5rem); }
.mono span:not(:first-child) { margin-left: -0.26em; }
.mono span:nth-child(2) { color: var(--pink); }
.logo-img { height: clamp(54px, 8vw, 86px); width: auto; margin: 0 auto; }


/* ============================================================================
   APP / SCÈNE
   ========================================================================== */
.app {
    position: fixed; inset: 0; z-index: 10;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 1.4s ease, visibility 1.4s ease;
}
.app.show { opacity: 1; visibility: visible; pointer-events: auto; }

.stage { position: absolute; inset: 0; overflow: hidden; background: #000; }

/* Une scène plein écran */
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.scene.is-active  { opacity: 1; visibility: visible; z-index: 2; }
.scene.is-leaving { visibility: visible; z-index: 1; }

.scene-img-wrap { position: absolute; inset: 0; overflow: hidden; will-change: transform, clip-path, filter; }
.scene-img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.0); will-change: transform, filter;
}
.scene.is-active .scene-img { animation: ken var(--ken, 9s) ease-out both; }

/* Voile pour la lisibilité du texte */
.scene-shade {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background:
        linear-gradient(to top, rgba(8,7,6,0.78) 0%, rgba(8,7,6,0.18) 38%, transparent 62%),
        linear-gradient(105deg, rgba(8,7,6,0.5) 0%, transparent 45%),
        radial-gradient(ellipse 100% 100% at 50% 45%, transparent 55%, rgba(0,0,0,0.45) 100%);
}
/* teinte d'ambiance du chapitre (atmosphère subtile par défaut) */
.scene-tint {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    mix-blend-mode: soft-light; opacity: 0.4;
    background: radial-gradient(ellipse 92% 82% at 50% 48%, rgb(var(--mood-rgb, 90,118,106)), transparent 80%);
}
/* SAISONS : parti pris colorimétrique assumé — la couleur change franchement */
.grade-spring .scene-tint,
.grade-summer .scene-tint,
.grade-autumn .scene-tint,
.grade-winter .scene-tint {
    mix-blend-mode: color; opacity: 0.5;
    background: rgb(var(--mood-rgb));
}
/* on garde un dégradé de profondeur par-dessus (vignette colorée douce) */
.grade-spring .scene-shade,
.grade-summer .scene-shade,
.grade-autumn .scene-shade,
.grade-winter .scene-shade { mix-blend-mode: normal; }

/* Texte de la scène */
.scene-text {
    position: absolute; z-index: 4;
    left: clamp(1.4rem, 6vw, 6rem); bottom: clamp(3rem, 11vh, 8rem);
    max-width: min(80vw, 640px);
}
.st-kicker {
    font-size: 0.6rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--accent-text);
}
.st-title {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1.0; color: var(--cream);
    margin: 0.5rem 0 0.4rem; text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.st-line { width: 64px; height: 1px; background: var(--accent-text); margin: 1rem 0; transform-origin: left; }
.st-caption {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.5rem);
    color: var(--cream-60); letter-spacing: 0.02em;
}
/* entrée animée du texte (rejouée à chaque scène) */
.scene.is-active .st-kicker  { animation: textRise 0.9s ease both 0.30s; }
.scene.is-active .st-title   { animation: textRise 1.0s cubic-bezier(.22,1,.36,1) both 0.42s; }
.scene.is-active .st-line    { animation: lineGrow 0.9s ease both 0.62s; }
.scene.is-active .st-caption { animation: textRise 1.0s ease both 0.72s; }


/* ============================================================================
   ÉTALONNAGE COLORIMÉTRIQUE (grades) — l'évolution se voit
   ========================================================================== */
.grade-spring .scene-img { filter: saturate(1.18) brightness(1.04) hue-rotate(-6deg); }
.grade-summer .scene-img { filter: saturate(1.28) brightness(1.09) contrast(1.02) sepia(0.14) hue-rotate(-14deg); }
.grade-autumn .scene-img { filter: sepia(0.5) saturate(1.5) hue-rotate(-18deg) contrast(1.05) brightness(1.0); }
.grade-winter .scene-img { filter: saturate(0.68) brightness(1.06) contrast(0.96) hue-rotate(12deg); }
.grade-soft   .scene-img { filter: brightness(1.07) contrast(0.95) saturate(0.96); }
.grade-warm   .scene-img { filter: saturate(1.1) brightness(1.05) sepia(0.1); }


/* ============================================================================
   TRANSITIONS TYPÉES (l'âme de chaque thème)
   --t = durée (posée par JS sur la scène)
   ========================================================================== */
/* fondu de base */
.enter-fade, .enter-bloom, .enter-tender, .enter-intimate { animation: sFadeIn var(--t,1.6s) ease both; }
.leave-fade, .leave-bloom, .leave-tender, .leave-intimate, .leave-season { animation: sFadeOut var(--t,1.6s) ease both; }

/* SEASONS — révélation par balayage + bascule de couleur (pas de fondu : net) */
.enter-season { opacity: 1; }
.enter-season .scene-img-wrap { animation: wipeIn var(--t,1.8s) cubic-bezier(.76,0,.24,1) both; }
.leave-season .scene-img-wrap { animation: driftOut var(--t,1.8s) ease both; }

/* INTIMATE — mise au point progressive */
.enter-intimate .scene-img-wrap { animation: focusIn var(--t,2s) cubic-bezier(.22,1,.36,1) both; }
.leave-intimate .scene-img-wrap { animation: focusOut var(--t,2s) ease both; }

/* BLOOM / TENDER : légère respiration en plus du fondu */
.enter-bloom  .scene-img-wrap { animation: breatheIn var(--t,2s) ease both; }
.enter-tender .scene-img-wrap { animation: breatheIn var(--t,3s) ease both; }

/* La « vague » de transition (flash de couleur / lumière) */
.wash {
    position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
}
.wash.run-season {
    background: linear-gradient(100deg, transparent 0%, var(--wash) 50%, transparent 100%);
    animation: washSweep var(--t,1.8s) ease both;
}
.wash.run-bloom {
    background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,244,226,0.95), transparent 70%);
    animation: washBloom var(--t,2s) ease both;
}
.wash.run-tender {
    background: radial-gradient(ellipse 90% 80% at 50% 50%, var(--wash), transparent 75%);
    animation: washTender var(--t,3s) ease both;
}


/* ============================================================================
   CHROME (interface par-dessus le récit)
   ========================================================================== */
.chrome { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.chrome > * { pointer-events: auto; }
.app.contemplate .chrome { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.chrome { transition: opacity 0.6s ease; }

/* Barre du haut */
.nav {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.5rem clamp(1.2rem, 3vw, 2.6rem);
    background: linear-gradient(to bottom, rgba(8,7,6,0.6), transparent);
}
.nav-brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.nav-brand .mono { font-size: 1.5rem; }
.nav-brand .logo-img { height: 34px; }
.nav-name { font-family: var(--serif); font-size: 1.25rem; font-style: italic; letter-spacing: 0.12em; }

.nav-themes {
    display: flex; align-items: center; justify-content: center; gap: clamp(0.8rem, 2.4vw, 2.2rem);
    flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.nav-themes::-webkit-scrollbar { display: none; }
.nav-themes button {
    position: relative; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--cream-40); white-space: nowrap; padding: 0.4rem 0; transition: color 0.35s ease;
}
.nav-themes button:hover { color: var(--cream); }
.nav-themes button.active { color: var(--accent-text); }
.nav-themes button.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: currentColor; transform-origin: left; animation: lineGrow 0.5s ease both;
}
.nav-themes button.is-soon { color: rgba(249,239,237,0.25); cursor: default; }
.nav-themes button.is-soon::after {
    content: 'bientôt'; margin-left: 0.7em; font-size: 0.85em; font-style: italic;
    text-transform: none; letter-spacing: 0.05em; opacity: 0.8;
}

.nav-actions { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.nav-btn {
    display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 1rem;
    font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-60);
    border: 1px solid var(--cream-15); border-radius: 30px; transition: all 0.3s ease;
}
.nav-btn:hover { color: var(--cream); border-color: var(--cream-40); }
.nav-btn--icon { width: 38px; padding: 0; font-size: 0.8rem; }

/* Rail des chapitres (droite) */
.rail {
    position: absolute; right: clamp(1.4rem, 3vw, 2.8rem); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-end;
}
.rail-item {
    display: flex; align-items: center; gap: 0.8rem; cursor: pointer;
    font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cream-40); transition: color 0.4s ease;
}
.rail-item:hover { color: var(--cream); }
.rail-label { opacity: 0; transform: translateX(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.rail-item:hover .rail-label, .rail-item.active .rail-label { opacity: 1; transform: translateX(0); }
.rail-dot {
    width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--cream-40);
    flex-shrink: 0; transition: all 0.4s ease; position: relative;
}
.rail-item.active { color: var(--accent-text); }
.rail-item.active .rail-dot { background: var(--accent-text); border-color: var(--accent-text); transform: scale(1.25); }
.rail-item.done .rail-dot { background: var(--cream-40); }

/* Bas : chapitre + indice */
.bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    padding: 1.4rem clamp(1.2rem, 3vw, 2.6rem) 1.6rem;
    background: linear-gradient(to top, rgba(8,7,6,0.55), transparent);
}
.bar-chapter { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--cream-60); }
.bar-hint {
    font-size: 0.54rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(249,239,237,0.3);
    text-align: right; transition: opacity 0.6s ease;
}

/* Progression globale */
.progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; height: 2px; background: rgba(249,239,237,0.08); }
.progress-fill { display: block; height: 100%; width: 0; background: var(--accent-text); transition: width 0.5s ease, background 0.6s ease; }

/* Carton-titre (nouveau chapitre d'aventure) */
.titlecard {
    position: absolute; inset: 0; z-index: 18;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; pointer-events: none; opacity: 0;
}
.titlecard.show { animation: cardInOut 2.4s ease both; }
.tc-index { font-size: 0.7rem; letter-spacing: 0.6em; text-transform: uppercase; color: var(--accent-text); }
.tc-name {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: clamp(3rem, 9vw, 7rem); color: var(--cream); margin: 0.6rem 0; letter-spacing: 0.03em;
    text-shadow: 0 4px 60px rgba(0,0,0,0.6);
}
.tc-sub { font-size: 0.62rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--cream-60); }


/* ============================================================================
   À PROPOS
   ========================================================================== */
.about {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: center; justify-content: center; overflow-y: auto;
    background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(216,168,168,0.18), transparent 70%), var(--cream);
    color: var(--forest); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.about.open { opacity: 1; visibility: visible; pointer-events: auto; }
.about-content { max-width: 600px; padding: 9vh 7vw; text-align: center; }
.about-ornament { font-size: 1.5rem; letter-spacing: 0.6em; color: var(--pink); margin-bottom: 1.6rem; }
.about-content h2 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(3rem, 7vw, 5rem); color: var(--forest); }
.about-sub { font-size: 0.58rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--bordeaux); margin-top: 0.6rem; }
.about-divider { width: 50px; height: 1px; background: var(--pink); margin: 2rem auto; }
.about-text { margin-bottom: 3rem; }
.about-text p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.95; color: rgba(35,50,43,0.82); margin-bottom: 1.2rem; }
.about-contact h4 { font-size: 0.56rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--sage); margin-bottom: 1.4rem; }
.about-links { display: flex; flex-direction: column; gap: 0.9rem; }
.about-links a { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--forest); text-decoration: none; transition: color 0.3s ease; }
.about-links a:hover { color: var(--bordeaux); }
.about-close {
    position: fixed; top: 4vh; right: 4vw; z-index: 130; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    color: var(--forest); border: 1px solid rgba(35,50,43,0.3); transition: transform 0.3s ease, background 0.3s ease;
}
.about-close:hover { background: rgba(35,50,43,0.07); transform: rotate(90deg); }


/* ============================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes rise      { to { opacity: 1; transform: translateY(0); } }
@keyframes grow      { to { width: 90px; } }
@keyframes textRise  { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes lineGrow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes ken       { from { transform: scale(1.0) translate(0, 0); } to { transform: scale(1.10) translate(-1.5%, -1.2%); } }

@keyframes sFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes sFadeOut  { from { opacity: 1; } to { opacity: 0; } }

@keyframes wipeIn    { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes driftOut  { from { transform: scale(1); filter: saturate(1); } to { transform: scale(1.08); filter: saturate(0.4) brightness(0.85); } }

@keyframes focusIn   { from { filter: blur(18px); transform: scale(1.08); } to { filter: blur(0); transform: scale(1); } }
@keyframes focusOut  { from { filter: blur(0); transform: scale(1); } to { filter: blur(14px); transform: scale(1.04); } }

@keyframes breatheIn { from { transform: scale(1.06); } to { transform: scale(1); } }

@keyframes washSweep { 0% { opacity: 0; transform: translateX(-40%); } 35% { opacity: 0.85; } 100% { opacity: 0; transform: translateX(40%); } }
@keyframes washBloom { 0% { opacity: 0; } 30% { opacity: 0.7; } 100% { opacity: 0; } }
@keyframes washTender{ 0% { opacity: 0; } 45% { opacity: 0.3; } 100% { opacity: 0; } }

@keyframes cardInOut { 0% { opacity: 0; transform: scale(1.04); } 18% { opacity: 1; transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(0.99); } }


/* ============================================================================
   PROLOGUE · PÉTALES · SON  (la touche personnelle)
   ========================================================================== */
.prologue {
    position: fixed; inset: 0; z-index: 110; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 8vw;
    background:
        radial-gradient(ellipse 90% 80% at 50% 38%, rgba(232,176,106,0.20), transparent 70%),
        linear-gradient(160deg, #2c221b 0%, #1a1411 58%, #0c0a09 100%);
    opacity: 0; visibility: hidden;
    transition: opacity 1.2s ease, visibility 1.2s ease;
}
.prologue.show { opacity: 1; visibility: visible; }
.prologue.fade-out { opacity: 0; }
.prologue > .pro-intro, .prologue > .pro-word, .prologue > .pro-outro { position: relative; z-index: 2; }

.pro-intro {
    font-size: 0.62rem; letter-spacing: 0.55em; text-transform: uppercase; color: var(--pink);
    opacity: 0; margin-bottom: 2.2rem;
}
.prologue.show .pro-intro { animation: sFadeIn 1.3s ease forwards 0.4s; }
.pro-intro.out { animation: sFadeOut 0.9s ease forwards; }
.pro-word {
    font-family: var(--serif); font-weight: 300; font-style: italic;
    font-size: clamp(2.6rem, 8vw, 5.5rem); color: var(--cream); line-height: 1.1;
    min-height: 1.2em; opacity: 0; text-shadow: 0 4px 50px rgba(0,0,0,0.4);
}
.pro-word.in  { animation: wordIn 0.95s cubic-bezier(.22,1,.36,1) forwards; }
.pro-word.out { animation: wordOut 0.5s ease forwards; }
.pro-outro {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    color: var(--cream-60); margin-top: 2.4rem; opacity: 0; max-width: 26ch;
}
.pro-outro.in { animation: wordIn 1.4s ease forwards; }
.pro-skip {
    position: absolute; bottom: 4vh; right: 4vw; z-index: 3;
    font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-40);
    transition: color 0.3s ease;
}
.pro-skip:hover { color: var(--cream); }

/* pétales qui dérivent */
.petals { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.prologue .petals { z-index: 1; }
.petal {
    position: absolute; top: -8vh; left: var(--x);
    width: var(--s); height: calc(var(--s) * 1.25);
    border-radius: 80% 4% 80% 4%;
    opacity: 0; filter: blur(0.4px);
    animation: petalDrift var(--dur) linear var(--delay) infinite;
}

/* bouton son coupé */
.nav-btn.muted { opacity: 0.45; position: relative; }
.nav-btn.muted::after {
    content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 1px;
    background: currentColor; transform: rotate(-20deg);
}

@keyframes wordIn  { from { opacity: 0; transform: translateY(24px); filter: blur(9px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes wordOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-16px); filter: blur(7px); } }
@keyframes petalDrift {
    0%   { transform: translate(0, 0) rotate(var(--r)); opacity: 0; }
    8%   { opacity: var(--o); }
    92%  { opacity: var(--o); }
    100% { transform: translate(var(--dx), 122vh) rotate(calc(var(--r) + 260deg)); opacity: 0; }
}


/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
    .nav-name { display: none; }
    .bar-hint { display: none; }
    .rail { right: 1rem; gap: 0.9rem; }
    .rail-label { display: none; }    /* uniquement les points sur mobile */
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .scene.is-active .scene-img { animation: none; transform: scale(1.02); }
    .intro-mark, .intro-name, .intro-tag, .intro-enter { opacity: 1; transform: none; }
    .intro-rule { width: 90px; }
}