@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Inter:wght@400;500;600&display=swap');


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --tir49-bg: #060811;
    --tir49-bg-secondary: #0d1020;

    --tir49-white: #f4f1e8;
    --tir49-muted: #a9aabd;

    --tir49-violet: #8c7cff;
    --tir49-cyan: #75d9ff;

    --tir49-gold: #d8c28a;

    --tir49-border: rgba(255,255,255,.12);

}


/* =========================================================
   RESET
========================================================= */


*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;margin:0;overflow-x:hidden}

#tir49-oracle{width:100%}
#tir49-oracle *{box-sizing:border-box}

/* =========================================================
   INTRO
========================================================= */

#tir49-intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:25px;
  width:100%;
  text-align:center
}

#tir49IntroImage{
  width:90%;
  max-width:500px;
  overflow:hidden;
  border:2px solid rgba(214,180,106,.7);
  border-radius:18px;
  box-shadow:0 0 30px rgba(214,180,106,.25),0 15px 40px rgba(0,0,0,.45);
  line-height:0
}

#tir49IntroImage img{
  display:block;
  width:100%;
  height:auto
}

#tir49IntroContent {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#tir49IntroTexte {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    text-align: center;
}

#tir49-start {
    margin: 30px auto 0;
}




/* =========================================================
   TEXTE
========================================================= */

.tir49-kicker {

    font-size: 10px;

    letter-spacing: .32em;

    color: var(--tir49-muted);

    margin:
        0 0 18px;

    font-weight: 600;

}

#tir49-title {

    font-family: Cinzel, serif;

    font-weight: 500;

    line-height: 1.05;

    font-size:
        clamp(40px, 7vw, 72px);

    margin: 0;

    text-shadow:
        0 0 35px
        rgba(132,117,255,.2);

}

#tir49-title em {

    font-style: normal;

    color: #ddd8ff;

}

#tir49-subtitle,
#tir49-focus-text {

    color: var(--tir49-muted);

    font-size:
        clamp(14px, 2vw, 17px);

    line-height: 1.7;

    margin:
        22px auto 28px;

    max-width: 480px;

}



/* =========================================================
   HINT
========================================================= */

#tir49-hint,
#tir49-focus-hint {

    font-size: 11px;

    color: #767990;
text-align: center;
    margin-top: 14px;

}


/* =========================================================
   FOCUS
========================================================= */

#tir49-focus-title {

    font-family: Cinzel, serif;

    font-size:
        clamp(30px, 5vw, 48px);

    font-weight: 500;

    margin: 0;

}


/* =========================================================
   CARTE DOS
========================================================= */

#tir49-card-trigger {

    width:
        clamp(210px, 42vw, 285px);

    aspect-ratio: 2 / 3;

    border: 0;

    background: none;

    padding: 0;

    cursor: pointer;

    position: relative;

    margin:
        8px auto 0;

    display: block;

    transition: .3s;

}

#tir49-card-trigger:hover {

    transform:
        translateY(-4px);

}

#tir49-card-aura {

    position: absolute;

    inset: 8%;

    border-radius: 22px;

    background:
        radial-gradient(
            circle,
            rgba(123,109,255,.35),
            transparent 68%
        );

    filter: blur(20px);

    animation:
        tir49-breathe
        3s
        infinite;

}

#tir49-card-back {

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(222,220,255,.3);

    border-radius: 18px;

    display: grid;

    place-content: center;

    gap: 15px;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(127,113,255,.2),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #17172d,
            #090a14
        );

    box-shadow:

        inset 0 0 45px
        rgba(133,116,255,.1),

        0 25px 70px
        rgba(0,0,0,.45);

}

#tir49-card-back::before {

    content: "";

    position: absolute;

    inset: 13px;

    border:
        1px solid
        rgba(216,194,138,.22);

    border-radius: 12px;

}

#tir49-card-symbol {

    font-size: 46px;

    color:
        var(--tir49-gold);

    text-shadow:
        0 0 28px
        rgba(216,194,138,.35);

}

#tir49-card-label {

    font-size: 9px;

    letter-spacing: .3em;

    color: #aaa6be;

}


/* =========================================================
   RÉSULTAT
========================================================= */

#tir49-card {

    width:
        min(520px, 90vw);

    margin:
        0 auto;

    padding: 1px;

    background:

        linear-gradient(
            145deg,
            rgba(216,194,138,.55),
            rgba(130,112,255,.55),
            rgba(255,255,255,.18)
        );

    border-radius: 22px;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.5);

}

#tir49-card-inner {

    min-height: 390px;

    padding:
        48px 38px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 22px;

    border-radius: 21px;

    background:

        radial-gradient(
            circle at 50% 35%,
            rgba(112,96,255,.12),
            transparent 50%
        ),

        #0b0c17;

}

.tir49-card-mark {

    color:
        var(--tir49-gold);

    font-size: 18px;

}

#tir49-card-number {

    font-size: 9px;

    letter-spacing: .28em;

    color: #7d7f94;

}

.tir49-card-line {

    width: 75px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(216,194,138,.55),
            transparent
        );

}

#tir49-message {

    font-family: Cinzel, serif;

    font-size:
        clamp(15px, 3vw, 24px);

    line-height: 1.35;

    margin: 0;

    max-width: 690px;

}

#tir49-closing {

    font-size: 12px;

    color: var(--tir49-muted);

    margin:
        25px 0 17px;

}




/* =========================================================
   ANIMATIONS
========================================================= */

#tir49-focus.tir49-active,
#tir49-reveal.tir49-active {

    animation:
        tir49-rise
        .7s
        ease both;

}

#tir49-reveal.tir49-reveal-active #tir49-card {

    animation:
        tir49-reveal-card
        1.15s
        cubic-bezier(.16,.9,.22,1)
        both;

}

#tir49-reveal.tir49-reveal-active #tir49-message {

    animation:
        tir49-text-in
        .8s
        .65s
        ease both;

}


@keyframes tir49-rise {

    from {
        opacity: 0;
        transform:
            translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}


@keyframes tir49-reveal-card {

    0% {

        opacity: 0;

        transform:
            rotateY(90deg)
            scale(.88);

    }

    55% {

        opacity: 1;

        transform:
            rotateY(-8deg)
            scale(1.03);

    }

    100% {

        transform:
            rotateY(0)
            scale(1);

    }

}


@keyframes tir49-text-in {

    from {

        opacity: 0;

        transform:
            translateY(10px);

    }

    to {

        opacity: 1;

        transform: none;

    }

}


@keyframes tir49-breathe {

    50% {

        transform:
            scale(1.08);

        opacity: .72;

    }

}


@keyframes tir49-spin {

    to {

        transform:
            translate(-50%, -50%)
            rotate(386deg);

    }

}


@keyframes tir49-spin-reverse {

    to {

        transform:
            translate(-50%, -50%)
            rotate(-334deg);

    }

}


@keyframes tir49-drift {

    to {

        transform:
            translate3d(50px,30px,0);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #tir49-oracle {

        padding:
            22px 18px;

    }

    #tir49-crystal {

        height: 230px;

    }

    #tir49-skull {

        transform:
            scale(.82);

    }

    #tir49-orbit-one {

        width: 285px;

        height: 285px;

    }

    #tir49-orbit-two {

        width: 350px;

        height: 190px;

    }

    #tir49-card-inner {

        min-height: 350px;

        padding:
            34px 25px;

    }

    #tir49-message {

        font-size: 18px;

        line-height: 1.6;

    }

}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

    }

}


[hidden] {
    display: none !important;
}