/* TheJOJOLands : la bande-annonce et les animations des liens (toutes les pages) */
:root {
    --paper: #f1e8d4;
    --ink: #141414;
    --kana-font: 'Dela Gothic One', 'Archivo Black', sans-serif;
}

body.locked { overflow: hidden; }

/* ---------- Bande-annonce (intro et mentions légales) ---------- */
.cinema {
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    cursor: pointer;
}

.cinema-black {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
}

.bar-top, .bar-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 12vh;
    background: #000;
    z-index: 5;
}

.bar-top { top: 0; }
.bar-bottom { bottom: 0; }

.skip {
    position: absolute;
    right: 24px;
    bottom: calc(12vh + 14px);
    z-index: 6;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.card {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 92%;
    text-align: center;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(26px, 5.5vw, 72px);
    line-height: 1.05;
    letter-spacing: 0.04em;
    color: #f2f2f2;
    transform: translate(-50%, -50%);
}

.card small {
    display: block;
    margin-top: 0.5em;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 0.26em;
    letter-spacing: 0.5em;
    color: #f5c518;
}

.card.title {
    font-size: clamp(40px, 10vw, 150px);
    color: #f5c518;
}

.card.title .kana-line {
    display: block;
    font-family: var(--kana-font);
    font-size: 0.32em;
    letter-spacing: 0.3em;
    color: #fff;
}

/* le montage rapide : chaque personnage claque à l'écran */
.shot {
    position: absolute;
    inset: 12vh 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--c);
    overflow: hidden;
}

.shot::before {
    content: '';
    position: absolute;
    inset: -60%;
    background: repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.25) 0 3deg, transparent 3deg 9deg);
}

.shot img {
    position: relative;
    height: 115%;
    margin-bottom: -15%;
    filter: drop-shadow(10px 6px 0 #000);
}

.shot b {
    position: absolute;
    left: 6%;
    top: 12%;
    font-family: var(--kana-font);
    font-weight: normal;
    font-size: clamp(40px, 9vw, 130px);
    color: #fff;
    -webkit-text-stroke: 5px #000;
    paint-order: stroke fill;
    transform: rotate(-6deg);
}

.shot span {
    position: absolute;
    left: 6%;
    bottom: 10%;
    padding: 6px 14px;
    background: #000;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(14px, 2.4vw, 30px);
    letter-spacing: 0.15em;
}

.ember {
    position: absolute;
    z-index: 2;
    width: var(--p);
    height: var(--p);
    background: #ffb347;
    box-shadow: 0 0 8px #ff7a1a;
}

.flare {
    position: absolute;
    left: -20%;
    right: -20%;
    top: 50%;
    height: 3px;
    z-index: 4;
    background: #fff;
}

.spot {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 85%, rgba(255, 255, 255, 0.16), transparent 60%);
}

.actor {
    position: absolute;
    bottom: 12vh;
    z-index: 3;
    filter: drop-shadow(8px 4px 0 #000);
}

.bubble {
    position: absolute;
    z-index: 6;
    max-width: min(420px, 70vw);
    padding: 12px 16px;
    background: #fff;
    color: #111;
    border: 3px solid #000;
    box-shadow: 6px 6px 0 #f5c518;
    font-weight: 600;
    font-size: clamp(13px, 1.6vw, 18px);
    line-height: 1.4;
}

.bubble strong {
    display: block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.75em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d62828;
}


/* ---------- Animations des liens ---------- */
.lk-layer {
    position: fixed;
    inset: 0;
    z-index: 9800;
    pointer-events: auto;
    overflow: hidden;
}

.lk-layer.lk-out {
    animation: lk-fade 0.4s ease-in forwards;
}

@keyframes lk-fade { to { opacity: 0; } }

/* site officiel : « ゴゴゴ » partout puis le tampon */
.lk-menace {
    background: repeating-conic-gradient(from 0deg at var(--x) var(--y), rgba(20, 20, 20, 0.12) 0 0.8deg, transparent 0.8deg 5deg), var(--paper);
    animation: lk-in 0.25s ease-out;
}

@keyframes lk-in { from { opacity: 0; } }

.lk-go {
    position: absolute;
    font-style: normal;
    font-family: var(--kana-font);
    line-height: 1;
    color: var(--ink);
    -webkit-text-stroke: 6px #fff;
    paint-order: stroke fill;
    transform: rotate(var(--r));
    animation: lk-pop 0.25s cubic-bezier(0.2, 1.6, 0.4, 1) both, lk-shiver 0.12s steps(2) 0.25s infinite;
}

@keyframes lk-pop {
    from { transform: rotate(var(--r)) scale(2.4); opacity: 0; }
    to   { transform: rotate(var(--r)) scale(1); opacity: 1; }
}

@keyframes lk-shiver {
    50% { transform: rotate(var(--r)) translate(2px, -2px); }
}

.lk-stamp {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0.15em 0.4em 0.25em;
    font-family: var(--kana-font);
    font-size: clamp(70px, 16vw, 220px);
    line-height: 1;
    text-align: center;
    color: #d62828;
    background: var(--paper);
    border: 0.08em solid #d62828;
    transform: translate(-50%, -50%) rotate(-8deg);
    animation: lk-stamp 0.3s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.lk-stamp small {
    display: block;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.16em;
    letter-spacing: 0.3em;
}

@keyframes lk-stamp {
    from { transform: translate(-50%, -50%) rotate(-8deg) scale(3); opacity: 0; }
    to   { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
}

/* retour : les couleurs s'inversent et l'horloge tourne à l'envers */
.lk-invert {
    position: fixed;
    inset: 0;
    z-index: 9790;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    animation: lk-in 0.2s steps(2);
}

.lk-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    text-align: center;
}

.lk-dial {
    width: min(46vh, 70vw);
    height: min(46vh, 70vw);
    animation: lk-pop-plain 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes lk-pop-plain { from { transform: scale(0.2); opacity: 0; } }

.lk-dial circle {
    fill: rgba(20, 20, 20, 0.85);
    stroke: #fff;
    stroke-width: 5;
}

.lk-dial line {
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: square;
}

.lk-dial .lk-hour, .lk-dial .lk-minute {
    transform-origin: 100px 100px;
    stroke-width: 7;
}

.lk-dial .lk-minute { stroke: #f5c518; animation: lk-back 1.7s cubic-bezier(0.5, 0, 1, 1) forwards; }
.lk-dial .lk-hour   { animation: lk-back-slow 1.7s cubic-bezier(0.5, 0, 1, 1) forwards; }

@keyframes lk-back      { to { transform: rotate(-2880deg); } }
@keyframes lk-back-slow { to { transform: rotate(-240deg); } }

.lk-clock b {
    font-family: var(--kana-font);
    font-weight: normal;
    font-size: clamp(30px, 6vw, 70px);
    color: #f5c518;
    -webkit-text-stroke: 6px var(--ink);
    paint-order: stroke fill;
}

.lk-clock span {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(18px, 3vw, 34px);
    letter-spacing: 0.2em;
    padding: 4px 14px;
    background: var(--ink);
}

.lk-clock em {
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
    background: #fff;
    padding: 2px 8px;
}

/* e-mail : l'enveloppe et les lettres qui volent */
.lk-mail {
    background: rgba(241, 232, 212, 0.55);
}

.lk-envelope {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(320px, 70vw);
    height: min(200px, 44vw);
    transform: translate(-50%, -50%);
    background: #fff;
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    transition: transform 0.55s cubic-bezier(0.6, 0, 0.8, 0.4);
    perspective: 600px;
}

.lk-envelope::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 2px), var(--ink) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) left / 50% 100% no-repeat,
                linear-gradient(to top left, transparent calc(50% - 2px), var(--ink) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) right / 50% 100% no-repeat;
    opacity: 0.35;
}

.lk-flap {
    position: absolute;
    left: -4px;
    right: -4px;
    top: -4px;
    height: 62%;
    z-index: 2;
    background: #e0457b;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: 50% 0;
    transform: rotateX(180deg);
    transition: transform 0.3s ease-in;
}

.lk-envelope.lk-closed .lk-flap { transform: none; }

.lk-envelope.lk-away { transform: translate(60vw, -90vh) rotate(25deg) scale(0.4); }

.lk-postmark {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 4px 8px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: #d62828;
    border: 3px solid #d62828;
    background: #fff;
    transform: rotate(-10deg);
    animation: lk-stamp-small 0.25s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

@keyframes lk-stamp-small { from { transform: rotate(-10deg) scale(2.5); opacity: 0; } }

.lk-carrier {
    position: absolute;
    left: calc(50% + min(160px, 35vw) - 60px);
    top: calc(50% - min(100px, 22vw) - 130px);
    height: 150px;
    filter: drop-shadow(5px 5px 0 var(--ink));
    animation: lk-carrier-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both, lk-bob 0.8s ease-in-out 0.5s infinite alternate;
    transition: transform 0.55s cubic-bezier(0.6, 0, 0.8, 0.4);
}

.lk-carrier.lk-away { transform: translate(60vw, -90vh); animation: none; }

@keyframes lk-carrier-in { from { transform: translate(40vw, -40vh); } }
@keyframes lk-bob { to { transform: translateY(-10px); } }

.lk-letter {
    position: fixed;
    z-index: 3;
    color: var(--ink);
    pointer-events: none;
}

/* GitHub : les engrenages */
.lk-gears {
    display: grid;
    place-items: center;
    background: rgba(20, 20, 20, 0.6);
    animation: lk-in 0.2s ease-out;
}

.lk-panel {
    width: min(460px, 90vw);
    padding: 24px;
    background: var(--paper);
    border: 5px solid var(--ink);
    box-shadow: 10px 10px 0 #2551c9;
    text-align: center;
    animation: lk-pop-plain 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.lk-machine { width: 100%; height: auto; }

.lk-machine path { fill: var(--ink); }
.lk-machine circle { fill: var(--paper); }

.lk-spin { animation: lk-turn 1.2s linear infinite; }
.lk-rev  { animation-direction: reverse; animation-duration: 0.8s; }

@keyframes lk-turn { to { transform: rotate(360deg); } }

.lk-quote {
    margin-top: 10px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.lk-bar {
    display: flex;
    gap: 4px;
    height: 22px;
    margin: 14px 0 10px;
    padding: 3px;
    border: 3px solid var(--ink);
}

.lk-bar i {
    flex: 0 0 calc((100% - 44px) / 12);
    background: #2551c9;
}

.lk-dest {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(20, 20, 20, 0.6);
}

/* Google, CNIL : la page se camoufle */
.lk-disguise {
    display: grid;
    align-content: start;
}

.lk-disguise i {
    aspect-ratio: 1;
    background: var(--c);
    opacity: 0;
    animation: lk-cell 0.2s steps(2) var(--d) forwards;
}

@keyframes lk-cell {
    50%  { opacity: 1; background: #d62828; }
    100% { opacity: 1; }
}

.lk-glitch {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 14px 22px;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(20px, 5vw, 60px);
    color: #fff;
    background: var(--ink);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    animation: lk-in 0.3s steps(3) 0.5s both;
}

.lk-glitch small {
    display: block;
    margin-top: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.3em;
    letter-spacing: 0.2em;
    color: #f5c518;
    text-align: center;
}

.lk-glitch::before, .lk-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 22px;
    top: 14px;
}

.lk-glitch::before { color: #00ffff; mix-blend-mode: screen; animation: lk-split 0.3s steps(2) infinite; }
.lk-glitch::after  { color: #ff00ff; mix-blend-mode: screen; animation: lk-split 0.25s steps(2) infinite reverse; }

@keyframes lk-split {
    0%   { transform: translate(-5px, 0);    clip-path: inset(0 0 60% 0); }
    50%  { transform: translate(5px, 2px);   clip-path: inset(45% 0 10% 0); }
    100% { transform: translate(-3px, -2px); clip-path: inset(20% 0 40% 0); }
}