/*
Welcome to the Backend!
*/

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

:root {
    /*----- All The Colors -----*/
    /* Sky */
    --sky-top: #0a0916;
    --sky-mid1: #110f28;
    --sky-mid2: #1c183a;
    --sky-mid3: #1a1535;
    --sky-bottom: #16122e;
    /* Stars & Moon */
    --star-white: #e8e4f0;
    --star-warm: #f0dcc0;
    --star-cool: #c8d0f0;
    --moon-glow: rgba(230, 220, 190, 0.15);
    /* Parchment */
    --parchment-fresh: #e2dbd0;
    --parchment-moonlit: #d8d0c4;
    /* Text */
    --text-primary: #e8e4f0;
    --text-muted: rgba(232, 228, 240, 0.5);
}

/*----------------------------------- Body Basics -----*/
html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Cormorant Infant', serif;
    color: var(--text-primary);
    background: var(--sky-top);
}

h1,
h2,
h3 {
    font-family: 'Almendra Display', serif;
    color: var(--star-warm);
    font-weight: 400;
}

/*----- Fire Classes & Animation -----*/
.firelight {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(circle,
            rgba(255, 190, 70, 0.34) 0%,
            rgba(255, 145, 35, 0.18) 40%,
            rgba(255, 110, 25, 0.08) 58%,
            transparent 76%);
    animation: fire-glow-outer 3.8s ease-in-out infinite;
}

.firelight::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 42%;
    height: 42%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
            rgba(255, 245, 205, 0.78) 0%,
            rgba(255, 215, 120, 0.52) 26%,
            rgba(255, 165, 55, 0.22) 52%,
            transparent 88%);
    animation: fire-glow-inner 2.6s ease-in-out infinite;
}

@keyframes fire-glow-outer {

    0%,
    100% {
        opacity: 0.72;
        transform: scale(0.96);
    }

    18% {
        opacity: 0.87;
        transform: scale(1.03);
    }

    41% {
        opacity: 0.65;
        transform: scale(0.91);
    }

    63% {
        opacity: 0.9;
        transform: scale(1.06);
    }

    82% {
        opacity: 0.76;
        transform: scale(0.99);
    }
}

@keyframes fire-glow-inner {

    0%,
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.93);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }

    45% {
        opacity: 0.68;
        transform: translate(-50%, -50%) scale(0.89);
    }

    67% {
        opacity: 0.97;
        transform: translate(-50%, -50%) scale(1.04);
    }

    85% {
        opacity: 0.77;
        transform: translate(-50%, -50%) scale(0.96);
    }
}

.firelight--fireplace {
    border-radius: 50% / 40%;
    background: radial-gradient(ellipse,
            rgba(255, 200, 90, 0.32) 0%,
            rgba(255, 150, 40, 0.18) 38%,
            rgba(255, 95, 20, 0.10) 58%,
            transparent 78%);
    animation-duration: 2.2s;
}

.firelight--fireplace::before {
    width: 34%;
    height: 48%;
    top: 54%;
    background: radial-gradient(ellipse,
            rgba(255, 245, 210, 0.75) 0%,
            rgba(255, 210, 110, 0.56) 24%,
            rgba(255, 120, 30, 0.25) 50%,
            transparent 76%);
    animation-duration: 1.45s;
}

.firelight--rich::after {
    content: "";
    position: absolute;
    left: 56%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 22%;
    height: 26%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
            rgba(255, 250, 225, 0.48) 0%,
            rgba(255, 185, 80, 0.18) 44%,
            transparent 74%);
    animation: fire-glow-spark 1.3s ease-in-out infinite;
}

@keyframes fire-glow-spark {

    0%,
    100% {
        opacity: 0.42;
        transform: translate(-50%, -50%) scale(0.9);
    }

    35% {
        opacity: 0.78;
        transform: translate(-50%, -50%) scale(1.14);
    }

    60% {
        opacity: 0.36;
        transform: translate(-50%, -50%) scale(0.82);
    }
}

/*----------------------------------- Fixed Night Sky -----*/
.night-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background:
        radial-gradient(ellipse 120% 40% at 50% 100%,
            rgba(30, 25, 70, 0.4) 0%,
            transparent 70%),
        linear-gradient(to bottom,
            var(--sky-top) 0%,
            var(--sky-mid1) 20%,
            var(--sky-mid2) 45%,
            var(--sky-mid3) 70%,
            var(--sky-bottom) 100%);
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: top left;
    background-repeat: repeat;
}

.starfeild-one {
    background-image: url('assets/images/site/Stars1.webp');
    animation: star-breathe-a 11.7s ease-in-out infinite;
}

.starfeild-two {
    background-image: url('assets/images/site/Stars2.webp');
    animation: star-breathe-b 7.3s ease-in-out infinite;
}

@keyframes star-breathe-a {

    0%,
    100% {
        opacity: 0.6;
    }

    30% {
        opacity: 0.82;
    }

    65% {
        opacity: 0.55;
    }
}

@keyframes star-breathe-b {

    0%,
    100% {
        opacity: 0.65;
    }

    40% {
        opacity: 0.52;
    }

    70% {
        opacity: 0.9;
    }
}

/*----------------------------------- Corvus Constellation -----*/
.corvus-outer {
    position: fixed;
    top: 12vw;
    right: 2vw;
    width: clamp(100px, 17vw, 310px);
    aspect-ratio: 328 / 332;
    z-index: 3;
    background-image: url('assets/images/Corvus.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.corvus-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% * (175 / 328));
    /* ~53.4% of outer */
    aspect-ratio: 175 / 220;
    z-index: 2;
}

.corvus {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    z-index: 2;
}

@media (max-width: 768px) {
    .corvus-outer {
        top: calc(6vw + 60px);
    }
}

/*----- Figure Lines -----*/
.corvus-lines {
    stroke: var(--parchment-moonlit);
    stroke-opacity: 0.28;
    stroke-width: 0.7;
    stroke-linecap: round;
}

.corvus-line:nth-child(1) {
    stroke-opacity: 0.22;
}

.corvus-line:nth-child(2) {
    stroke-opacity: 0.3;
}

.corvus-line:nth-child(3) {
    stroke-opacity: 0.24;
}

.corvus-line:nth-child(4) {
    stroke-opacity: 0.18;
}

.corvus-line:nth-child(5) {
    stroke-opacity: 0.26;
}

/*----- Stars — base -----*/
/* .corvus-star {
  pointer-events: auto;
  cursor: pointer;
} */
.corvus-star__glow {
    opacity: 0.8;
    /* always slightly visible now, gradient handles the fade */
    transition: opacity 0.6s ease;
}

.corvus-star__point {
    transition: opacity 0.4s ease, r 0.4s ease;
}

/*----- Individual star colors (spectral type accurate) -----*/
/* Gienah γ — blue-white giant, brightest */
.corvus-star--gienah .corvus-star__point {
    fill: var(--star-cool);
    opacity: 0.9;
    animation: corvus-flicker-gienah 6.7s ease-in-out infinite;
}

/* Algorab δ — blue-white subgiant */
.corvus-star--algorab .corvus-star__point {
    fill: var(--star-cool);
    opacity: 0.8;
    animation: corvus-flicker-algorab 9.3s ease-in-out infinite 1.2s;
}

/* Kraz β — warm yellow-gold giant */
.corvus-star--kraz .corvus-star__point {
    fill: var(--star-warm);
    opacity: 0.82;
    animation: corvus-flicker-kraz 8.1s ease-in-out infinite 3.4s;
}

/* Minkar ε — orange-red giant */
.corvus-star--minkar .corvus-star__point {
    fill: #f4a070;
    opacity: 0.72;
    animation: corvus-flicker-minkar 11.5s ease-in-out infinite 0.7s;
}

/* Alchiba α — faintest, yellow-white, barely there */
.corvus-star--alchiba .corvus-star__point {
    fill: var(--parchment-fresh);
    opacity: 0.45;
    animation: corvus-flicker-alchiba 14.2s ease-in-out infinite 5.1s;
}

/*----- Hover states — glow reveal -----*/
.corvus-star:hover .corvus-star__glow,
.corvus-star:focus .corvus-star__glow {
    opacity: 0.14;
}

/*----- Flicker animations -----*/

@keyframes corvus-flicker-gienah {

    0%,
    100% {
        opacity: 0.9;
    }

    35% {
        opacity: 0.78;
    }

    68% {
        opacity: 0.95;
    }
}

@keyframes corvus-flicker-algorab {

    0%,
    100% {
        opacity: 0.8;
    }

    28% {
        opacity: 0.65;
    }

    72% {
        opacity: 0.85;
    }
}

@keyframes corvus-flicker-kraz {

    0%,
    100% {
        opacity: 0.82;
    }

    42% {
        opacity: 0.7;
    }

    61% {
        opacity: 0.88;
    }
}

@keyframes corvus-flicker-minkar {

    0%,
    100% {
        opacity: 0.72;
    }

    38% {
        opacity: 0.58;
    }

    75% {
        opacity: 0.76;
    }
}

@keyframes corvus-flicker-alchiba {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.32;
    }

    80% {
        opacity: 0.5;
    }
}

/*----- Reduced motion -----*/
@media (prefers-reduced-motion: reduce) {
    .corvus-star__point {
        animation: none !important;
    }
}

/*----------------------------------- Social Balloon -----*/
.social-balloon {
    position: fixed;
    bottom: 50%;
    transform: translateY(100%);
    right: 4vw;
    width: clamp(60px, 10vw, 110px);
    z-index: 14;
    container-type: inline-size;
    container-name: balloon;
}

@media (max-width: 768px) {
    .social-balloon {
        bottom: 50%;
        transform: translateY(50%);
    }
}

.balloon-img-wrap {
    position: relative;
}

.balloon-img {
    width: 100%;
    object-fit: contain;
    z-index: 1;
}

.balloon-trigger {
    position: absolute;
    background: transparent;
    border: none;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 22%;
    cursor: pointer;
    z-index: 2;
}

.social-fan {
    position: absolute;
    width: 100%;
    height: 44px;
    /* or a fixed height */
    bottom: 0;
    left: 0;
    /* background: rgba(255, 0, 0, 0.3) */
}

.fan-link {
    position: absolute;
    width: 44px;
    height: 44px;
    left: 50%;
    transform: translate(-50%) scale(0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

.fan-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#fan-bluesky {
    bottom: -100%;
    left: 50%;
}

#fan-instagram {
    bottom: -25%;
    left: -22px;
}

#fan-threads {
    bottom: 100%;
    left: -32px;
}

#fan-facebook {
    bottom: 225%;
    left: -22px;
}

@container balloon (min-width: 90px) {
    #fan-bluesky {
        left: 30%;
    }

    #fan-instagram {
        bottom: -20%;
    }

    #fan-threads {
        bottom: 95%;
    }

    #fan-facebook {
        bottom: 220%;
    }
}

/* #fan-bluesky  { bottom: 2vw; left: -8vw; }
#fan-facebook { bottom: 1vw; left: -12vw; }
/* etc */

/* clamp floor — balloon is 60px *
@container balloon (max-width: 60px) {
  #fan-bluesky  { bottom: 12px; left: -48px; }
  #fan-facebook { bottom: 6px;  left: -72px; }
}

/* clamp ceiling — balloon is 110px *
@container balloon (min-width: 110px) {
  #fan-bluesky  { bottom: 22px; left: -88px; }
  #fan-facebook { bottom: 11px; left: -132px; }
}*/


/*
#fan-bluesky {
    top: -44px;
    transform: translateY(-50%);
}

#fan-facebook {}

#fan-threads {} */

/* #fan-bluesky {
    transform: rotate(-70deg) translateY(-80px) rotate(70deg);
}


#fan-facebook {
    transform: rotate(-23deg) translateY(-80px);
}

#fan-threads {
    transform: rotate(23deg) translateY(-80px) rotate(-23deg);
}

#fan-instagram {
    transform: rotate(70deg) translateY(-80px) rotate(-70deg);
} */

/* #fan-bluesky {
    transform: translateY(-44px)
} */

/* #fan-facebook {
    transform: rotate(-40deg) translateY(-90px) rotate(40deg);
}

#fan-threads {
    transform: rotate(0deg) translateY(-90px) rotate(0deg);
}

#fan-instagram {
    transform: rotate(40deg) translateY(-90px) rotate(40deg);
} */

/*


.social-fan {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    background: palegreen;
}

.fan-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rebeccapurple;
}
 */

/*
  <div class="social-balloon">
    <button class="balloon-trigger" id="balloonTrigger" aria-expanded="false" aria-controls="socialFan" aria-label="Social media links">
      <img src="assets/images/SocialBalloon.png" class="balloon-img" alt="">
    </button>
    <div class="social-fan" id="socialFan" aria-hidden="true">
      <a class="fan-link" id="fan-bluesky" href="https://bsky.app/profile/csmitchell.bsky.social" target="_blank" rel="noopener" aria-label="Bluesky">
        <img src="assets/images/site/IconBluesky.webp" alt="Bluesky">
      </a>
      <a class="fan-link" id="fan-facebook" href="https://facebook.com/csmitchellauthor" target="_blank" rel="noopener" aria-label="Facebook">
        <img src="assets/images/site/IconFacebook.webp" alt="Facebook">
      </a>
      <a class="fan-link" id="fan-threads" href="https://threads.net/@csmitchellauthor" target="_blank" rel="noopener" aria-label="Threads">
        <img src="assets/images/site/IconThreads.webp" alt="Threads">
      </a>
      <a class="fan-link" id="fan-instagram" href="https://instagram.com/csmitchellauthor" target="_blank" rel="noopener" aria-label="Instagram">
        <img src="assets/images/site/IconInstagram.webp" alt="Instagram">
      </a>
    </div>
  </div>



  */
/*----------------------------------- Moon Nav -----*/
.moon-nav {
    position: fixed;
    top: 3vh;
    right: 4vw;
    width: 9vw;
    height: 9vw;
    min-width: 60px;
    min-height: 60px;
    max-width: 200px;
    max-height: 200px;
    z-index: 200;
}

.moon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 202;
}

.moon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Gloooooow */
.moon-glow {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 220, 170, 0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 201;
    transition: opacity 0.4s ease;
}

.moon-nav:hover .moon-glow {
    background: radial-gradient(circle, rgba(230, 220, 170, 0.28) 0%, transparent 65%);
}

/* Moonray Nav Items */
.moonray-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 199;
    pointer-events: none;
}

.moonray {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 2px;
    transform-origin: 0 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.3s ease;
}

.moon-nav.open .moonray {
    opacity: 1;
    pointer-events: auto;
}

/* Fade-in */
.moon-nav.open .moonray:nth-child(1) {
    transition-delay: 0.00s;
}

.moon-nav.open .moonray:nth-child(2) {
    transition-delay: 0.05s;
}

.moon-nav.open .moonray:nth-child(3) {
    transition-delay: 0.10s;
}

.moon-nav.open .moonray:nth-child(4) {
    transition-delay: 0.15s;
}

.moon-nav.open .moonray:nth-child(5) {
    transition-delay: 0.20s;
}

.moon-nav.open .moonray:nth-child(6) {
    transition-delay: 0.25s;
}

/* Fade-out */
.moon-nav:not(.open) .moonray:nth-child(1) {
    transition-delay: 0.25s;
}

.moon-nav:not(.open) .moonray:nth-child(2) {
    transition-delay: 0.20s;
}

.moon-nav:not(.open) .moonray:nth-child(3) {
    transition-delay: 0.15s;
}

.moon-nav:not(.open) .moonray:nth-child(4) {
    transition-delay: 0.10s;
}

.moon-nav:not(.open) .moonray:nth-child(5) {
    transition-delay: 0.05s;
}

.moon-nav:not(.open) .moonray:nth-child(6) {
    transition-delay: 0.00s;
}

/* Ray gradient */
.moonray-beam {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 320px;
    height: 110px;
    clip-path: polygon(0 50%, 100% 0%, 100% 100%);
    background: linear-gradient(to right,
            rgba(230, 220, 170, 0.32) 0%,
            rgba(230, 220, 170, 0.10) 55%,
            transparent 100%);
    transition: background 0.3s ease;
}

/* Hover ray */
.moonray:hover .moonray-beam {
    background: linear-gradient(to right,
            rgba(230, 220, 170, 0.55) 0%,
            rgba(230, 220, 170, 0.20) 55%,
            transparent 100%);
}

/* Nav link text */
.moonray-link {
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%);
    font-family: 'Almendra Display', serif;
    font-size: clamp(0.75rem, 1.1vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    color: rgba(230, 220, 170, 0.7);
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 0 12px rgba(230, 220, 170, 0.4);
    transition: color 0.3s ease, text-shadow 0.3s ease, letter-spacing 0.3s ease;
    pointer-events: auto;
}

.moonray:hover .moonray-link {
    color: rgba(240, 228, 185, 1);
    text-shadow: 0 0 18px rgba(230, 220, 170, 0.7);
    letter-spacing: 0.24em;
}

/* Ray Angles */
.moonray:nth-child(1) {
    transform: rotate(210deg);
}

.moonray:nth-child(2) {
    transform: rotate(186deg);
}

.moonray:nth-child(3) {
    transform: rotate(162deg);
}

.moonray:nth-child(4) {
    transform: rotate(138deg);
}

.moonray:nth-child(5) {
    transform: rotate(114deg);
}

.moonray:nth-child(6) {
    transform: rotate(90deg);
}

/* Text Angles */
.moonray:nth-child(1) .moonray-link {
    transform: translateY(-50%) rotate(-180deg);
    left: 75px;
}

.moonray:nth-child(2) .moonray-link {
    transform: translateY(-50%) rotate(-180deg);
    left: 85px;
}

.moonray:nth-child(3) .moonray-link {
    transform: translateY(-50%) rotate(-180deg);
    left: 85px;
}

.moonray:nth-child(4) .moonray-link {
    transform: translateY(-50%) rotate(-180deg);
    left: 80px;
}

.moonray:nth-child(5) .moonray-link {
    transform: translateY(-50%) rotate(-180deg);
    left: 75px;
}

.moonray:nth-child(6) .moonray-link {
    transform: translateY(-50%) rotate(-180deg);
    left: 70px;
}

/*----------------------------------- Moon Nav -----*/
.ink-bloom {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 190;
    pointer-events: none;
    overflow: hidden;
}

.ink-bloom-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ink-bloom-links {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    pointer-events: none;
}

.ink-bloom-links a {
    font-family: 'Almendra Display', serif;
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    color: rgba(230, 220, 170, 0);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: color 0.2s ease, letter-spacing 0.2s ease, text-shadow 0.2s ease;
    pointer-events: none;
}

.ink-bloom-links a:hover {
    color: rgba(245, 235, 195, 1) !important;
    letter-spacing: 0.28em;
    text-shadow: 0 0 20px rgba(230, 220, 170, 0.6);
}

.ink-bloom-close {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Infant', serif;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: rgba(230, 220, 170, 0);
    pointer-events: none;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

/*- Pesky Media Junk -*/
@media (max-width: 768px) {
    .moonray-container {
        display: none;
    }

    .ink-bloom {
        display: block;
    }
}

@media (min-width: 769px) {
    .ink-bloom {
        display: none !important;
    }
}

/*----------------------------------- Tree Wrapper -----*/
.tree-scroll {
    position: relative;
    z-index: 10;
    padding-right: 12%;
}

/*----------------------------------- Canopy -----*/
.canopy {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 900;
    max-height: 100vh;
    background-color: transparent;
    background-image: url('assets/images/site/Canopy.webp');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.canopy-text {
    position: absolute;
    right: 14%;
    bottom: 12%;
    text-align: right;
}

.canopy-title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.1em;
    line-height: 1.1;
    background: linear-gradient(160deg,
            var(--star-warm) 0%,
            var(--star-white) 40%,
            var(--star-cool) 80%,
            var(--star-warm) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.3em;
    filter: drop-shadow(0 0 30px rgba(230, 220, 190, 0.15));
    animation: fadeInUp 1.2s ease-out both;
}

.canopy-tagline {
    font-size: clamp(0.8rem, 2.2vw, 1.6rem);
    font-weight: 300;
    font-style: italic;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    animation: fadeInUp 1.2s ease-out 0.4s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*----- Mobile Canopy -----*/
@media (max-width: 768px) {
    .canopy-text {
        right: 0%;
        bottom: 0%;
    }

    .canopy-title {
        margin-bottom: 0.1em;
        filter: drop-shadow(0 0 30px rgba(230, 220, 190, 0.35));
    }

    .canopy-tagline {
        color: var(--star-warm);
    }
}

/*----------------------------------- Branches -----*/
.branch {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 350;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -1px;
}

.branch-one {
    background-image: url('assets/images/site/Branch_1.webp');
}

.branch-two {
    background-image: url('assets/images/site/Branch_2.webp');
}

.branch-three {
    background-image: url('assets/images/site/Branch_3.webp');
}

.branch-four {
    background-image: url('assets/images/site/Branch_4.webp');
}

.branch-five {
    background-image: url('assets/images/site/Branch_5.webp');
}

/*----------------------------------- Content -----*/
.content {
    position: relative;
    width: 100%;
    max-width: 1920px;
    padding: 3rem 8vw 3rem 14vw;
    background-size: 1920px 400px;
    background-repeat: round round;
    background-position: top left;
    overflow: visible;
}

.content-inner {
    max-width: 70ch;
    margin: 0 auto;
}

.content-inner h2 {
    font-family: 'Almendra Display', serif;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 0.8em;
    color: var(--star-warm);
}

.content-inner h3 {
    font-family: 'Almendra Display', serif;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.06em;
    margin-bottom: 0.8em;
    color: var(--parchment-moonlit);
}

.content-inner p {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.9;
    font-weight: 300;
    color: var(--text-primary);
    opacity: 0.75;
    margin-bottom: 1.2em;
}

.content-inner em {
    color: var(--text-muted);
}

.content-inner a {
    color: var(--star-warm);
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 220, 192, 0.3);
    transition: border-color 0.3s ease, opacity 0.3s ease;
}

.content-inner a:hover {
    border-color: var(--star-warm);
    opacity: 1;
}

.content-one {
    background-image: url('assets/images/site/Tile_1.webp');
}

.content-two {
    background-image: url('assets/images/site/Tile_2.webp');
}

.content-three {
    background-image: url('assets/images/site/Tile_3.webp');
}

.content-four {
    background-image: url('assets/images/site/Tile_4.webp');
}

.content-five {
    background-image: url('assets/images/site/Tile_5.webp');
}

.spider-word {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

.spider {
    position: absolute;
    bottom: -24px;
    right: -1ch;
    animation: spider-drop 7s ease-in-out infinite 2s;
}

.spider::before {
    content: '';
    position: absolute;
    bottom: 24;
    left: 50%;
    transform: translateX(-50%) scaleY(1);
    transform-origin: bottom center;
    width: 1px;
    height: 16px;
    background: var(--parchment-moonlit);
    opacity: 0.35;
    transition: transform 0.1s;
    animation: thread-grow 7s ease-in-out infinite 2s;
}

@keyframes spider-drop {

    0%,
    30%,
    100% {
        transform: translateY(0);
    }

    55% {
        transform: translateY(14px);
    }

    70% {
        transform: translateY(10px);
    }

    80% {
        transform: translateY(13px);
    }
}

@keyframes thread-grow {

    0%,
    30%,
    100% {
        transform: translateX(-50%) scaleY(1);
    }

    55% {
        transform: translateX(-50%) scaleY(1.875);
    }

    70% {
        transform: translateX(-50%) scaleY(1.625);
    }

    80% {
        transform: translateX(-50%) scaleY(1.8125);
    }
}

/*----------------------------------- Roots -----*/
.roots {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 849;
    background-image: url('assets/images/site/Roots.webp');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.root-contact {
    width: 100%;
    padding-left: 25%;
    text-align: center;
}

@media (max-width: 768px) {
    .root-contact {
        position: absolute;
        top: -15%;
        right: 0;
        text-align: right;
    }
}

.root-contact h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--star-warm);
}

.root-contact a,
.root-contact span {
    color: var(--star-warm);
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    font-weight: 300;
    line-height: 1.8;
    opacity: 0.6;
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 220, 192, 0.3);
    transition: border-color 0.3s ease, opacity 0.3s ease;
}

.root-contact a:hover,
.root-contact span:hover {
    border-color: var(--star-warm);
    opacity: 1;
}

.email-reveal a {
    font-family: 'Cormorant Infant', serif;
    color: var(--parchment-moonlit);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: color 0.3s ease;
}

.email-reveal a:hover {
    color: var(--text-primary);
}

.mole-hole {
    position: absolute;
    overflow: hidden;
    bottom: 13%;
    right: 12%;
    width: 22%;
    height: 28%;
    border-radius: 30% 50% 48% 35%;
}

.mole-fire {
    position: absolute;
    bottom: 20%;
    right: -2%;
    transform: translateX(-50%);
    width: 50%;
    height: 30%;
}

.mole-lamp {
    position: absolute;
    top: 35%;
    left: 36%;
    transform: translateX(-50%);
    width: 20%;
    height: 30%;
}

.root-privacy {
    position: absolute;
    bottom: 10%;
    right: 1%;
    font-weight: 600;
    opacity: 0.4;
    transform: rotate(60deg);
    transform-origin: right center;
}

.privacy-one {
    display: inline-block;
    transform: rotate(20deg);
}

.privacy-two {
    display: inline-block;
    transform: rotate(-10deg);
}

.root-privacy a {
    font-family: 'Cormorant Infant', serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--parchment-moonlit);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.root-privacy a:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .root-privacy {
        right: 0%;
        bottom: 0%;
        transform: rotate(70deg);
    }

    .privacy-one {
        transform: rotate(-30deg);
    }

    .root-privacy a {
        font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    }
}

.root-legal {
    position: absolute;
    left: 2vw;
    top: -50%;
    font-size: clamp(0.5rem, 1.4vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0.4;
    color: var(--parchment-moonlit);
    white-space: nowrap;
    transform: rotate(90deg);
    transform-origin: left bottom;
}

.root-legal a {
    color: var(--parchment-moonlit);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.root-legal a:hover {
    opacity: 0.8;
}

/*----------------------------------- Critters -----*/
.critter--mobile,
.critter--mid,
.critter--wide {
    display: none;
}

/*----- Critter Layout Disappearing Act -----*/
/*
  Critters under the spell:
    Fairy Squirrel
    Luna Moth
  */
@media (max-width: 768px) {
    .critter--mobile {
        display: block;
    }
}

@media (min-width: 769px) {
    .critter--mid {
        display: block;
    }
}

/*
  @media (min-width: 769px) and (max-width: 2559px) {
    .critter--mid { display: block; }
  }
  @media (min-width: 2560px) {
    .critter--wide { display: block; }
  }
    */
.critter {
    position: absolute;
    pointer-events: auto;
    left: var(--x);
    bottom: var(--y);
    transform: translateX(-50%);
    z-index: 15;
}

.critter--inner {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
}

.critter>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
}

/*----- Fairy Squirrel -----*/
/*
  image size 339 × 299
  */
.fairy-squirrel-flight {
    position: absolute;
    left: 15%;
    bottom: -5%;
    animation: squirrel-hover 4s ease-in-out infinite;
}

@keyframes squirrel-hover {

    0%,
    100% {
        transform: translate(0, 0) rotate(-2deg);
    }

    25% {
        transform: translate(3px, -4px) rotate(1deg);
    }

    50% {
        transform: translate(-2px, -8px) rotate(3deg);
    }

    75% {
        transform: translate(-4px, -3px) rotate(-1deg);
    }
}

.fairy-squirrel {
    width: clamp(113px, 17.7vw, 339px);
    aspect-ratio: 339 / 299;
}

.fairy-squirrel__one {
    animation: wing-flap 0.75s steps(1) infinite;
}

.fairy-squirrel__two {
    animation: wing-flap 0.75s steps(1) infinite reverse;
}

@keyframes wing-flap {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .fairy-squirrel-flight {
        left: 27%;
        bottom: auto;
        top: 0%;
    }

    .content-one {
        padding-top: clamp(90px, 25vw, 160px);
    }
}

/*----- Luna Moth -----*/
/*
  image size 110 × 120
  */
.luna-moth-flight {
    position: absolute;
    left: 35%;
    bottom: 15%;
    animation: moth-drift-x 7s ease-in-out infinite;
}

.luna-moth-float {
    animation: moth-drift-y 5s ease-in-out infinite;
}

.luna-moth {
    width: clamp(36px, 5.7vw, 110px);
    aspect-ratio: 110 / 120;
}

@media (max-width: 768px) {
    .luna-moth-flight {
        left: 60%;
        bottom: auto;
        top: 5%;
    }
}

.luna-moth__one {
    animation: moth-flap-a 0.95s steps(1) infinite;
}

.luna-moth__two {
    animation: moth-flap-b 0.95s steps(1) infinite;
}

@keyframes moth-flap-a {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes moth-flap-b {

    0%,
    49% {
        opacity: 0;
    }

    50%,
    100% {
        opacity: 1;
    }
}

@keyframes moth-drift-x {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(10px);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(-10px);
    }
}

@keyframes moth-drift-y {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    25% {
        transform: translateY(-10px) rotate(2deg);
    }

    50% {
        transform: translateY(0) rotate(4deg);
    }

    75% {
        transform: translateY(8px) rotate(-2deg);
    }
}

/*----- Chipmunk -----*/
/*
  image size 125 × 260
  */
.chipmunk {
    --x: 92%;
    --y: 69%;
    z-index: 15;
    width: clamp(50px, 6.5vw, 125px);
    aspect-ratio: 125 / 260;
    cursor: pointer;
}

/*- Chipmunk Images -*/
.chipmunk__body {
    display: block;
    z-index: 1;
}

.chipmunk__sign {
    display: block;
    z-index: 2;
}

@keyframes sign-bob {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(5px);
    }
}

@media (min-width: 769px) {
    .chipmunk__sign {
        animation: sign-bob 4s ease-in-out infinite;
    }
}

.chipmunk__lantern {
    display: none;
    z-index: 2;
}

.lantern-glow {
    display: none;
    z-index: 1;
    position: absolute;
    top: 27%;
    left: 12%;
    transform: translateX(-50%);
    width: 60%;
    height: 40%;
}

/*- Mobile Lantern -*/
@media (max-width: 768px) {
    .chipmunk {
        --x: 20%;
        --y: 68%;
    }

    .chipmunk__body {
        display: none;
    }

    .chipmunk__sign {
        display: none;
    }

    .chipmunk__lantern {
        display: block;
    }

    .lantern-glow {
        display: block;
        pointer-events: none;
        animation: lantern-flicker 3s ease-in-out infinite;
    }
}

/*----- Cat -----*/
/*
  image size 1920 × 488
  */
.cat {
    --x: 0%;
    --y: -17%;
    width: 100%;
    aspect-ratio: 1920 / 488;
    transform: none;
}

.cat-frame__one {
    opacity: 1;
}

.cat-frame__two {
    opacity: 0;
    animation: kat-blink 9s ease-in-out infinite 2s;
}

@keyframes kat-blink {

    0%,
    88% {
        opacity: 0;
    }

    90%,
    92% {
        opacity: 1;
    }

    91%,
    93% {
        opacity: 0;
    }

    94%,
    96% {
        opacity: 1;
    }

    97%,
    100% {
        opacity: 0;
    }
}

/*----- Penguin -----*/
/*
  image size 283 × 308
  */
.penguin {
    --x: 15%;
    --y: 37%;
    width: clamp(94px, 14.7vw, 283px);
    aspect-ratio: 283 / 308;
}

.penguin-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.penguin-fan {
    transform-origin: 70.7% 56.8%;
    animation: fan-wave 2.5s ease-in-out infinite;
}

@keyframes fan-wave {

    0%,
    100% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(6deg);
    }
}

@media (max-width: 768px) {
    .penguin {
        --x: 18%;
    }
}

/*----- Book Stack -----*/
/*
  image size 283 × 308
  */
.bookstack {
    --x: 76%;
    --y: 55%;
    width: clamp(68px, 8.1vw, 156px);
    aspect-ratio: 313 / 283;
}

.bookstack-frame__one {
    opacity: 1;
}

.bookstack-frame__two {
    opacity: 0;
    animation: book-flutter 7s steps(1) infinite 1.5s;
}

@keyframes book-flutter {

    0%,
    78% {
        opacity: 0;
    }

    80%,
    90% {
        opacity: 1;
    }

    92% {
        opacity: 0;
    }

    94%,
    97% {
        opacity: 1;
    }

    99%,
    100% {
        opacity: 0;
    }
}

/*----- Jackalope -----*/
/*
  image size 286 × 462
  */
.jackalope {
    --x: 18%;
    --y: 16%;
    width: clamp(95px, 14.9vw, 286px);
    aspect-ratio: 286 / 462;
}

.jackalope-frame__one {
    opacity: 1;
    animation: page-turn-hide 11s steps(1) infinite 3s;
}

.jackalope-frame__two {
    opacity: 0;
    animation: page-turn 11s steps(1) infinite 3s;
}

@keyframes page-turn-hide {

    0%,
    80% {
        opacity: 1;
    }

    82%,
    88% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    92%,
    96% {
        opacity: 0;
    }

    98%,
    100% {
        opacity: 1;
    }
}

@keyframes page-turn {

    0%,
    80% {
        opacity: 0;
    }

    82%,
    88% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    92%,
    96% {
        opacity: 1;
    }

    98%,
    100% {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .jackalope {
        --x: 22%;
        --y: -13%;
    }
}

/*----- Raven -----*/
/*
  image size 274 × 318
  */
.raven {
    --x: 18%;
    --y: 26%;
    width: clamp(91px, 14.3vw, 274px);
    aspect-ratio: 274 / 318;
}

.raven-frame__one {
    opacity: 1;
    animation: gem-hide 8s steps(1) infinite 1s;
}

.raven-frame__two {
    opacity: 0;
    animation: gem-show 8s steps(1) infinite 1s;
}

@keyframes gem-hide {

    0%,
    70% {
        opacity: 1;
    }

    72%,
    82% {
        opacity: 0;
    }

    84% {
        opacity: 1;
    }

    86%,
    94% {
        opacity: 0;
    }

    96%,
    100% {
        opacity: 1;
    }
}

@keyframes gem-show {

    0%,
    70% {
        opacity: 0;
    }

    72%,
    82% {
        opacity: 1;
    }

    84% {
        opacity: 0;
    }

    86%,
    94% {
        opacity: 1;
    }

    96%,
    100% {
        opacity: 0;
    }
}

/* Gem sparkle */
.raven-sparkle {
    position: absolute;
    top: 34%;
    right: 18%;
    width: 4%;
    height: 5%;
    border-radius: 30%;
    pointer-events: none;
    opacity: 0;
    transform: rotate(22deg);
    animation: gem-sparkle 8s ease-in-out infinite 1s;
}

@keyframes gem-sparkle {

    0%,
    70% {
        opacity: 0;
        box-shadow: none;
    }

    73% {
        opacity: 0.6;
        box-shadow: 0 0 8px 3px rgba(0, 210, 150, 0.5), 0 0 16px 6px rgba(0, 180, 120, 0.25);
    }

    78% {
        opacity: 1;
        box-shadow: 0 0 12px 5px rgba(0, 220, 160, 0.7), 0 0 24px 10px rgba(0, 200, 140, 0.35), 0 0 40px 16px rgba(0, 180, 120, 0.15);
    }

    82% {
        opacity: 0.5;
        box-shadow: 0 0 6px 2px rgba(0, 210, 150, 0.4);
    }

    84% {
        opacity: 0;
        box-shadow: none;
    }

    87% {
        opacity: 0.7;
        box-shadow: 0 0 10px 4px rgba(0, 220, 160, 0.6), 0 0 20px 8px rgba(0, 200, 140, 0.3);
    }

    92% {
        opacity: 1;
        box-shadow: 0 0 14px 6px rgba(0, 220, 160, 0.8), 0 0 28px 12px rgba(0, 200, 140, 0.4), 0 0 44px 18px rgba(0, 180, 120, 0.2);
    }

    95% {
        opacity: 0.3;
        box-shadow: 0 0 4px 2px rgba(0, 210, 150, 0.3);
    }

    97%,
    100% {
        opacity: 0;
        box-shadow: none;
    }
}

/*----- Woodpecker -----*/
/*
  image size 196 × 285
  */
.woodpecker {
    --x: 60%;
    --y: 20%;
    width: clamp(65px, 10.2vw, 196px);
    aspect-ratio: 196 / 285;
}

.woodpecker-frame__one {
    opacity: 1;
    animation: mallet-hide 6s steps(1) infinite 0.5s;
}

.woodpecker-frame__two {
    opacity: 0;
    animation: mallet-show 6s steps(1) infinite 0.5s;
}

@keyframes mallet-hide {

    0%,
    60% {
        opacity: 1;
    }

    62%,
    67% {
        opacity: 0;
    }

    69% {
        opacity: 1;
    }

    71%,
    76% {
        opacity: 0;
    }

    78% {
        opacity: 1;
    }

    80%,
    85% {
        opacity: 0;
    }

    87%,
    100% {
        opacity: 1;
    }
}

@keyframes mallet-show {

    0%,
    60% {
        opacity: 0;
    }

    62%,
    67% {
        opacity: 1;
    }

    69% {
        opacity: 0;
    }

    71%,
    76% {
        opacity: 1;
    }

    78% {
        opacity: 0;
    }

    80%,
    85% {
        opacity: 1;
    }

    87%,
    100% {
        opacity: 0;
    }
}

/*----- Kestrel -----*/
/*
  image size 161 × 125
  */
.kestrel {
    --x: 82%;
    --y: 34%;
    width: clamp(58px, 8.4vw, 161px);
    aspect-ratio: 161 / 125;
}

.kestrel-frame__one {
    opacity: 1;
    animation: solder-hide 5s steps(1) infinite 2s;
}

.kestrel-frame__two {
    opacity: 0;
    animation: solder-show 5s steps(1) infinite 2s;
}

@keyframes solder-hide {

    0%,
    65% {
        opacity: 1;
    }

    67%,
    75% {
        opacity: 0;
    }

    77%,
    100% {
        opacity: 1;
    }
}

@keyframes solder-show {

    0%,
    65% {
        opacity: 0;
    }

    67%,
    75% {
        opacity: 1;
    }

    77%,
    100% {
        opacity: 0;
    }
}

/* Smoke—because fire means you are doing it wrong */
.kestrel-smoke {
    position: absolute;
    bottom: 60%;
    left: 30%;
    width: 3px;
    pointer-events: none;
}

.smoke-wisp {
    position: absolute;
    top: 9%;
    left: -13%;
    width: 3px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(to top, rgba(200, 200, 210, 0.5), transparent);
    animation: smoke-rise 2.5s ease-out infinite;
    transform-origin: bottom center;
}

.smoke-wisp:nth-child(2) {
    left: 3px;
    animation-delay: 0.8s;
    animation-duration: 3s;
}

.smoke-wisp:nth-child(3) {
    left: -2px;
    animation-delay: 1.6s;
    animation-duration: 2s;
}

@keyframes smoke-rise {
    0% {
        opacity: 0;
        transform: translateY(0) scaleX(1) rotate(0deg);
    }

    20% {
        opacity: 0.6;
        transform: translateY(-6px) scaleX(1.2) rotate(2deg);
    }

    60% {
        opacity: 0.4;
        transform: translateY(-16px) scaleX(1.8) rotate(-3deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-28px) scaleX(2.5) rotate(4deg);
    }
}

/*----- Swallow -----*/
/*
  image size 138 × 125
  */
.swallow-flight {
    position: absolute;
    left: 35%;
    bottom: 17%;
    width: clamp(46px, 7.2vw, 138px);
    aspect-ratio: 274 / 318;
}

@keyframes swallow-hop {

    0%,
    45% {
        transform: translate(0, 0);
    }

    48% {
        transform: translate(14%, -28%);
    }

    50%,
    72% {
        transform: translate(12%, -24%);
    }

    76% {
        transform: translate(5%, -14%);
    }

    80%,
    88% {
        transform: translate(3%, -8%);
    }

    91% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes swallow-walk {
    0% {
        transform: translateX(2vw) translateY(-75%) scaleX(1);
    }

    30% {
        transform: translateX(-15vw) translateY(-75%) scaleX(1);
    }

    32% {
        transform: translateX(-15vw) translateY(-95%) scaleX(1);
    }

    34% {
        transform: translateX(-15vw) translateY(-75%) scaleX(1);
    }

    35% {
        transform: translateX(-15vw) translateY(-75%) scaleX(-1);
    }

    70% {
        transform: translateX(2vw) translateY(-80%) scaleX(-1);
    }

    72% {
        transform: translateX(2vw) translateY(-75%) scaleX(1);
    }

    100% {
        transform: translateX(2vw) translateY(-75%) scaleX(1);
    }
}

@media (max-width: 768px) {
    .swallow-flight {
        position: absolute;
        left: auto;
        bottom: auto;
        right: 0%;
        top: 0%;
        transform: translateX(2vw) translateY(-75%) scaleX(1);
        animation: swallow-walk 14s ease-in-out infinite;
    }

    .swallow-contain {
        position: relative;
        width: 100%;
        height: 1px;
    }
}

@media (min-width: 769px) {
    .swallow-flight {
        animation: swallow-hop 12s ease-in-out infinite 4s;
    }
}

/*
  @media (min-width: 769px) and (max-width: 2559px) {
    .critter--mid { display: block; }
  }
  @media (min-width: 2560px) {
    .critter--wide { display: block; }
  }
    */

.swallow {
    width: clamp(46px, 7.2vw, 138px);
    aspect-ratio: 274 / 318;
}

.swallow-frame__one {
    opacity: 1;
    animation: swallow-hide 12s steps(1) infinite 4s;
}

.swallow-frame__two {
    opacity: 0;
    animation: swallow-show 12s steps(1) infinite 4s;
}

@keyframes swallow-hide {

    0%,
    48% {
        opacity: 1;
    }

    50%,
    88% {
        opacity: 0;
    }

    90%,
    100% {
        opacity: 1;
    }
}

@keyframes swallow-show {

    0%,
    48% {
        opacity: 0;
    }

    50%,
    88% {
        opacity: 1;
    }

    90%,
    100% {
        opacity: 0;
    }
}

/*----- Dogs -----*/
/*
  image size 222 × 131
  */
.dogs {
    --x: 53%;
    --y: 48%;
    width: clamp(64px, 11.6vw, 222px);
    aspect-ratio: 222 / 131;
}

.dogs-frame__one {
    opacity: 1;
    animation: ear-hide 9s steps(1) infinite 2s;
}

.dogs-frame__two {
    opacity: 0;
    animation: ear-twitch 9s steps(1) infinite 2s;
}

@keyframes ear-hide {

    0%,
    55% {
        opacity: 1;
    }

    57%,
    61% {
        opacity: 0;
    }

    63% {
        opacity: 1;
    }

    65%,
    69% {
        opacity: 0;
    }

    71%,
    100% {
        opacity: 1;
    }
}

@keyframes ear-twitch {

    0%,
    55% {
        opacity: 0;
    }

    57%,
    61% {
        opacity: 1;
    }

    63% {
        opacity: 0;
    }

    65%,
    69% {
        opacity: 1;
    }

    71%,
    100% {
        opacity: 0;
    }
}

/*----- Mole -----*/
/*
  image size 191 × 148
  */
.mole {
    --x: 33%;
    --y: 4%;
    width: clamp(44px, 9.9vw, 191px);
    aspect-ratio: 191 / 148;
}

/*----- Mandrake -----*/
/*
  image size 86 × 199
  */
.mandrake {
    --x: 90%;
    --y: 21%;
    width: clamp(35px, 4.5vw, 86px);
    aspect-ratio: 86 / 199;
}

@media (max-width: 768px) {
    .mandrake {
        --x: 25%;
    }
}

.mandrake-frame__one {
    opacity: 1;
    animation: yawn-hide 14s steps(1) infinite 5s;
}

.mandrake-frame__two {
    opacity: 0;
    animation: yawn-show 14s steps(1) infinite 5s;
}

@keyframes yawn-hide {

    0%,
    70% {
        opacity: 1;
    }

    72%,
    88% {
        opacity: 0;
    }

    90%,
    100% {
        opacity: 1;
    }
}

@keyframes yawn-show {

    0%,
    70% {
        opacity: 0;
    }

    72%,
    88% {
        opacity: 1;
    }

    90%,
    100% {
        opacity: 0;
    }
}

/*

@media (max-width: 768px) {}

@media (min-width: 769px) {}
@media (min-width: 769px) and (max-width: 2559px) {}

@media (min-width: 2560px) {}

@media (min-width: 5500px) {}
  */
/*----------------------------------- Modals -----*/
.legal-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(6, 4, 18, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: modal-fade-in 0.25s ease both;
}

.legal-modal.open {
    display: flex;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.legal-modal-inner {
    position: relative;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    background: linear-gradient(160deg, rgba(18, 14, 45, 0.98) 0%, rgba(12, 9, 32, 0.97) 100%);
    border: 1px solid rgba(230, 220, 170, 0.2);
    border-radius: 2px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 0 60px rgba(6, 4, 18, 0.8), inset 0 1px 0 rgba(230, 220, 170, 0.15);
    animation: modal-rise 0.3s ease both;
}

@keyframes modal-rise {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.legal-modal-inner h2 {
    font-family: 'Almendra Display', serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(230, 220, 170, 0.9);
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(230, 220, 170, 0.12);
}

.legal-modal-body p {
    font-family: 'Cormorant Infant', serif;
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(232, 228, 240, 0.75);
    margin-bottom: 0.9rem;
}

.legal-modal-body p em {
    color: rgba(232, 228, 240, 0.4);
    font-style: italic;
}

.legal-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(230, 220, 170, 0.4);
    transition: color 0.2s ease;
    padding: 0.2rem 0.4rem;
}

.legal-modal-close:hover {
    color: rgba(230, 220, 170, 0.9);
}