/* ============================================================
   BRADLEY'S FIRST VOYAGE — MIGHTY FIRST BIRTHDAY ADVENTURE
   styleIndex.css
============================================================ */


/* ============================================================
   FONTS
   Self-hosted variable fonts, latin subset only.
============================================================ */

@font-face
{

    font-family: 'Fraunces';

    font-style: normal;

    font-weight: 600 900;

    font-display: swap;

    src: url('../fonts/frauncesLatin.woff2') format('woff2');

    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}

@font-face
{

    font-family: 'Outfit';

    font-style: normal;

    font-weight: 300 700;

    font-display: swap;

    src: url('../fonts/outfitLatin.woff2') format('woff2');

    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

}


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

:root
{

    /* ── Island adventure palette ── */

    --colorMidnight: #0b2740;

    --colorDeepOcean: #0e3d56;

    --colorOcean: #14789e;

    --colorLagoon: #1fb4c4;

    --colorTurquoise: #49d8d0;

    --colorSky: #7cd7f3;

    --colorSeafoam: #aeeede;

    --colorSand: #f6e7c1;

    --colorSunsetGold: #ffc25e;

    --colorSunsetOrange: #ff8a4d;

    --colorCoral: #ff6b5e;

    --colorHibiscus: #e64c7b;

    --colorLeaf: #2fa465;

    --colorLeafDark: #176a4b;

    --colorGlow: #ffd98a;

    --colorBone: #f3e9d2;

    --colorWood: #5a3a24;

    --colorWoodDark: #33200f;

    --colorInk: #2b1c12;

    --colorPaper: #f8efd9;

    --colorPaperShade: #ecd9ae;

    --colorError: #ff8f8f;

    --colorSuccess: #8fe3c0;

    /* ── Typography ── */

    --fontDisplay: 'Fraunces', Georgia, 'Times New Roman', serif;

    --fontBody: 'Outfit', 'Segoe UI', -apple-system, sans-serif;

    /* ── Rhythm ── */

    --spaceSection: clamp(4rem, 10vw, 7rem);

    --radiusSoft: 1.25rem;

    --radiusOrganic: 58% 42% 55% 45% / 52% 48% 52% 48%;

    /* ── Motion ── */

    --easeCinematic: cubic-bezier(0.22, 1, 0.36, 1);

    --durationSlow: 900ms;

    --durationMedium: 500ms;

    --durationFast: 250ms;

}


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

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

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html
{

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}

body
{

    font-family: var(--fontBody);

    font-weight: 400;

    line-height: 1.6;

    color: var(--colorSand);

    background-color: var(--colorMidnight);

    overflow-x: hidden;

}

img,
svg,
video,
canvas
{

    display: block;

    max-width: 100%;

}

button
{

    font: inherit;

    color: inherit;

    background: none;

    border: none;

    cursor: pointer;

}

input,
select,
textarea
{

    font: inherit;

}

a
{

    color: inherit;

}

/* Author display values must never defeat the hidden attribute. */

[hidden]
{

    display: none !important;

}


/* ============================================================
   TYPOGRAPHY
============================================================ */

h1,
h2,
h3
{

    font-family: var(--fontDisplay);

    font-weight: 900;

    line-height: 1.1;

    text-wrap: balance;

}

.sectionEyebrow,
.heroEyebrow
{

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color: var(--colorSunsetGold);

}

.sectionHeading
{

    margin-top: 0.75rem;

    font-size: clamp(2rem, 6vw, 3.25rem);

    color: var(--colorPaper);

}

.sectionSupport
{

    max-width: 34rem;

    margin: 1rem auto 0;

    font-size: clamp(1rem, 2.5vw, 1.15rem);

    color: rgba(246, 231, 193, 0.85);

}

.sectionIntro
{

    position: relative;

    z-index: 2;

    max-width: 46rem;

    margin: 0 auto;

    padding: 0 1.25rem;

    text-align: center;

}


/* ============================================================
   ACCESSIBILITY HELPERS
============================================================ */

.skipLink
{

    position: fixed;

    top: -4rem;

    left: 1rem;

    z-index: 200;

    padding: 0.75rem 1.25rem;

    font-weight: 600;

    color: var(--colorMidnight);

    background-color: var(--colorGlow);

    border-radius: 0 0 0.75rem 0.75rem;

    text-decoration: none;

    transition: top var(--durationFast) ease;

}

.skipLink:focus
{

    top: 0;

}

:focus-visible
{

    outline: 3px solid var(--colorGlow);

    outline-offset: 3px;

}


/* ============================================================
   NO-JAVASCRIPT FALLBACK
============================================================ */

.noscriptInvitation
{

    max-width: 40rem;

    margin: 2rem auto;

    padding: 2rem;

    text-align: center;

    background-color: var(--colorDeepOcean);

    border: 2px solid var(--colorSunsetGold);

    border-radius: var(--radiusSoft);

}

.noscriptInvitation h1
{

    margin: 0.75rem 0;

    color: var(--colorGlow);

}

.noscriptInvitation p
{

    margin: 0.75rem 0;

}

.noscriptEyebrow
{

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--colorSunsetGold);

}


/* ============================================================
   FIXED CONTROLS
============================================================ */

/* ── Sound toggle ── */

.soundToggle
{

    position: fixed;

    top: calc(1rem + env(safe-area-inset-top, 0px));

    right: calc(1rem + env(safe-area-inset-right, 0px));

    z-index: 90;

    display: grid;

    place-items: center;

    width: 3rem;

    height: 3rem;

    color: var(--colorGlow);

    background-color: rgba(11, 39, 64, 0.65);

    border: 1px solid rgba(255, 217, 138, 0.4);

    border-radius: 50%;

    backdrop-filter: blur(6px);

    transition: transform var(--durationFast) ease, background-color var(--durationFast) ease;

}

.soundToggle:hover
{

    transform: scale(1.08);

    background-color: rgba(11, 39, 64, 0.9);

}

.soundToggle svg
{

    width: 1.4rem;

    height: 1.4rem;

}

.soundToggle .soundIconOn
{

    display: none;

}

.soundToggle.isPlaying .soundIconOn
{

    display: block;

}

.soundToggle.isPlaying .soundIconOff
{

    display: none;

}

/* ── Sticky RSVP shortcut ── */

.stickyRsvpButton
{

    position: fixed;

    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));

    right: calc(1.1rem + env(safe-area-inset-right, 0px));

    z-index: 90;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.85rem 1.4rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--colorMidnight);

    background: linear-gradient(135deg, var(--colorGlow), var(--colorSunsetOrange));

    border-radius: 999px;

    box-shadow: 0 8px 24px rgba(255, 138, 77, 0.45);

    text-decoration: none;

    opacity: 0;

    transform: translateY(1rem);

    transition: opacity var(--durationMedium) ease, transform var(--durationMedium) var(--easeCinematic);

}

.stickyRsvpButton svg
{

    width: 1.2rem;

    height: 1.2rem;

}

.stickyRsvpButton.isVisible
{

    opacity: 1;

    transform: translateY(0);

}


/* ============================================================
   BUTTONS
============================================================ */

.primaryButton,
.ghostButton
{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.6rem;

    min-height: 3.25rem;

    padding: 0.85rem 2rem;

    font-family: var(--fontBody);

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    border-radius: 999px;

    text-decoration: none;

    transition: transform var(--durationFast) var(--easeCinematic), box-shadow var(--durationFast) ease, background-color var(--durationFast) ease;

}

.primaryButton
{

    color: var(--colorMidnight);

    background: linear-gradient(135deg, var(--colorGlow), var(--colorSunsetOrange));

    box-shadow: 0 8px 24px rgba(255, 138, 77, 0.35);

}

.primaryButton:hover
{

    transform: translateY(-2px);

    box-shadow: 0 12px 30px rgba(255, 138, 77, 0.5);

}

.primaryButton:active
{

    transform: translateY(0);

}

.ghostButton
{

    color: var(--colorGlow);

    background-color: transparent;

    border: 2px solid rgba(255, 217, 138, 0.55);

}

.ghostButton:hover
{

    background-color: rgba(255, 217, 138, 0.12);

}

.primaryButton svg,
.ghostButton svg
{

    width: 1.2rem;

    height: 1.2rem;

}


/* ============================================================
   HERO SECTION
============================================================ */

.heroSection
{

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    min-height: 100svh;

    padding: clamp(4.5rem, 12vh, 7rem) 1.25rem 6.5rem;

    overflow: hidden;

    background: linear-gradient(
        180deg,
        #6fd0f0 0%,
        #9fe2f6 24%,
        #ffedbe 40%,
        var(--colorSunsetGold) 47%,
        var(--colorTurquoise) 56%,
        var(--colorLagoon) 68%,
        var(--colorOcean) 82%,
        var(--colorMidnight) 100%
    );

}

/* ── Sky layers ── */

.heroSky
{

    position: absolute;

    inset: 0;

    pointer-events: none;

}

.heroSun
{

    position: absolute;

    top: 44%;

    left: 50%;

    width: clamp(11rem, 34vw, 22rem);

    height: clamp(11rem, 34vw, 22rem);

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        rgba(255, 250, 230, 0.95) 0%,
        rgba(255, 217, 138, 0.6) 32%,
        rgba(255, 194, 94, 0.28) 58%,
        transparent 75%
    );

    border-radius: 50%;

    animation: sunPulse 9s ease-in-out infinite;

}

.heroCloud
{

    position: absolute;

    height: 3.5rem;

    background: rgba(255, 255, 255, 0.55);

    border-radius: 999px;

    filter: blur(12px);

}

.heroCloudOne
{

    top: 12%;

    left: -6%;

    width: 34%;

    animation: cloudDrift 70s linear infinite;

}

.heroCloudTwo
{

    top: 24%;

    right: -8%;

    width: 42%;

    height: 4.5rem;

    background: rgba(255, 255, 255, 0.4);

    animation: cloudDrift 95s linear infinite reverse;

}

.heroCloudThree
{

    top: 6%;

    left: 44%;

    width: 26%;

    height: 2.5rem;

    animation: cloudDrift 110s linear infinite;

}

/* ── Islands, particles, waves ── */

.heroIslands
{

    position: absolute;

    bottom: 42%;

    left: 0;

    width: 100%;

    height: auto;

    opacity: 0.9;

    pointer-events: none;

}

.heroParticles
{

    position: absolute;

    inset: 0;

    pointer-events: none;

}

.heroWaves
{

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 100%;

    pointer-events: none;

}

.heroWave
{

    position: absolute;

    bottom: 0;

    left: -25%;

    width: 150%;

    /* The reset caps svg at max-width 100%; waves must overflow. */

    max-width: none;

    height: clamp(5rem, 14vw, 9rem);

}

.heroWaveBack
{

    animation: waveSway 11s ease-in-out infinite alternate;

}

.heroWaveMid
{

    bottom: -0.75rem;

    animation: waveSway 8s ease-in-out infinite alternate-reverse;

}

.heroWaveFront
{

    position: relative;

    bottom: -1.5rem;

    animation: waveSway 13s ease-in-out infinite alternate;

}

/* ── Tropical foliage framing ── */

.heroFoliage
{

    position: absolute;

    top: 0;

    width: clamp(7rem, 18vw, 15rem);

    height: auto;

    pointer-events: none;

}

.heroFoliageLeft
{

    left: 0;

    animation: foliageSway 8s ease-in-out infinite alternate;

    transform-origin: top left;

}

.heroFoliageRight
{

    right: 0;

    animation: foliageSway 10s ease-in-out infinite alternate-reverse;

    transform-origin: top right;

}

/* ── Maui ── */

.heroMaui
{

    position: absolute;

    right: clamp(-3rem, -2vw, 0rem);

    bottom: 2%;

    z-index: 2;

    width: clamp(13rem, 30vw, 27rem);

    pointer-events: none;

    transition: transform 0.4s ease-out;

}

.heroMauiImage
{

    width: 100%;

    height: auto;

    filter: drop-shadow(0 18px 30px rgba(6, 20, 34, 0.45));

    animation: mauiBreathe 6s ease-in-out infinite;

}

.heroMaui.isHidden
{

    display: none;

}

/* ── Hero content ── */

.heroContent
{

    position: relative;

    z-index: 3;

    text-align: center;

}

.heroEyebrow
{

    text-shadow: 0 2px 12px rgba(11, 39, 64, 0.35);

    animation: fadeUp 1s var(--easeCinematic) both;

}

.heroHeading
{

    margin-top: 1rem;

}

.heroHeadingPrimary
{

    display: block;

    font-size: clamp(2.6rem, 9.5vw, 5.75rem);

    letter-spacing: 0.01em;

    color: var(--colorPaper);

    background: linear-gradient(180deg, #ffffff 10%, var(--colorGlow) 55%, var(--colorSunsetOrange) 115%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 4px 18px rgba(11, 39, 64, 0.5));

    animation: fadeUp 1s var(--easeCinematic) 0.15s both;

}

.heroHeadingSecondary
{

    display: block;

    margin-top: 0.6rem;

    font-size: clamp(1rem, 3.4vw, 1.6rem);

    font-weight: 700;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--colorMidnight);

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);

    animation: fadeUp 1s var(--easeCinematic) 0.3s both;

}

.heroSupport
{

    margin-top: 1.25rem;

    font-size: clamp(1rem, 2.8vw, 1.25rem);

    font-weight: 500;

    color: var(--colorMidnight);

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);

    animation: fadeUp 1s var(--easeCinematic) 0.45s both;

}

/* ── Scroll cue ── */

.heroScrollCue
{

    position: absolute;

    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));

    left: 50%;

    z-index: 4;

    width: 1.6rem;

    height: 2.6rem;

    transform: translateX(-50%);

    border: 2px solid rgba(248, 239, 217, 0.6);

    border-radius: 999px;

}

.heroScrollCue span
{

    position: absolute;

    top: 0.5rem;

    left: 50%;

    width: 0.3rem;

    height: 0.55rem;

    transform: translateX(-50%);

    background-color: var(--colorGlow);

    border-radius: 999px;

    animation: scrollCueDrop 2.2s ease-in-out infinite;

}


/* ============================================================
   ENVELOPE STAGE
============================================================ */

.envelopeStage
{

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: clamp(2rem, 6vh, 4rem);

    perspective: 1200px;

}

/* ── Magical glow sweep ── */

.glowSweep
{

    position: fixed;

    inset: 0;

    z-index: 5;

    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(73, 216, 208, 0.3) 47%,
        rgba(255, 246, 227, 0.55) 50%,
        rgba(255, 217, 138, 0.35) 53%,
        transparent 70%
    );

    opacity: 0;

    transform: translateX(100%);

    pointer-events: none;

}

.glowSweep.isSweeping
{

    animation: glowSweepTravel 1.1s var(--easeCinematic) forwards;

}

/* ── Maui's bone fishhook ── */

.hookFigure
{

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 6;

    width: clamp(8rem, 24vw, 12rem);

    opacity: 0;

    transform: translate(120%, -70%) rotate(38deg);

    filter: drop-shadow(0 0 20px rgba(255, 217, 138, 0.7));

    pointer-events: none;

}

.hookFigure.isEntering
{

    animation: hookEnter 1.5s var(--easeCinematic) forwards;

}

.hookFigure.isStriking
{

    animation: hookStrike 0.6s var(--easeCinematic) forwards;

}

.hookFigure .hookSpark
{

    opacity: 0;

}

.hookFigure.isStriking .hookSpark
{

    animation: sparkPop 0.7s ease-out forwards;

}

.hookFigure.isStriking .hookSparkTwo
{

    animation-delay: 0.1s;

}

.hookFigure.isStriking .hookSparkThree
{

    animation-delay: 0.18s;

}

/* ── Envelope ── */

.invitationEnvelope
{

    position: relative;

    width: min(21rem, 82vw);

    aspect-ratio: 8 / 5.4;

    transform-style: preserve-3d;

    animation: envelopeFloat 5.5s ease-in-out infinite;

    transition: transform var(--durationMedium) var(--easeCinematic);

}

.invitationEnvelope:hover
{

    transform: scale(1.03);

}

.envelopeStage.isDimmed .invitationEnvelope
{

    animation-play-state: paused;

}

.envelopeBody
{

    position: absolute;

    inset: 0;

    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 45%),
        repeating-linear-gradient(45deg, rgba(51, 32, 15, 0.05) 0 2px, transparent 2px 9px),
        linear-gradient(180deg, var(--colorPaper), var(--colorPaperShade));

    border-radius: 0.6rem;

    box-shadow:
        0 24px 55px rgba(5, 17, 30, 0.5),
        inset 0 0 0 1px rgba(90, 58, 36, 0.3);

    overflow: hidden;

}

/* ── Tapa-cloth zigzag bands ── */

.envelopeTapaTop,
.envelopeTapaBottom
{

    position: absolute;

    left: 0;

    width: 100%;

    height: 0.7rem;

    background:
        linear-gradient(135deg, rgba(90, 58, 36, 0.55) 25%, transparent 25%) -6px 0 / 12px 12px,
        linear-gradient(225deg, rgba(90, 58, 36, 0.55) 25%, transparent 25%) -6px 0 / 12px 12px;

    background-repeat: repeat-x;

}

.envelopeTapaTop
{

    top: 0;

    transform: scaleY(-1);

}

.envelopeTapaBottom
{

    bottom: 0;

}

/* ── Tropical corner accent ── */

.envelopeFlower
{

    position: absolute;

    bottom: 0.45rem;

    left: 0.35rem;

    width: 3.6rem;

    height: 3.6rem;

}

.envelopeInitials
{

    position: absolute;

    bottom: 1.05rem;

    left: 50%;

    transform: translateX(-50%);

    font-family: var(--fontDisplay);

    font-size: 1.3rem;

    font-weight: 700;

    letter-spacing: 0.28em;

    color: var(--colorWood);

}

/* Decorative initials live in generated content so they are
   never counted as the button's visible label. */

.envelopeInitials::after
{

    content: 'B \00B7 D';

}

/* ── Card hiding inside the envelope ── */

.envelopeCard
{

    position: absolute;

    inset: 6% 8% auto 8%;

    height: 82%;

    background: linear-gradient(180deg, #fffaf0, var(--colorPaper));

    border-radius: 0.4rem;

    box-shadow: 0 4px 16px rgba(5, 17, 30, 0.3);

    transform: translateY(6%);

    z-index: -1;

    opacity: 0;

}

.envelopeCard::after
{

    content: 'You\2019re Invited';

    position: absolute;

    top: 14%;

    left: 50%;

    transform: translateX(-50%);

    font-family: var(--fontDisplay);

    font-size: 1.05rem;

    font-weight: 700;

    white-space: nowrap;

    color: var(--colorWood);

}

.invitationEnvelope.isOpening .envelopeCard
{

    z-index: 3;

    opacity: 1;

    animation: cardRise 0.9s var(--easeCinematic) 0.55s forwards;

}

/* ── Flap ── */

.envelopeFlap
{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 58%;

    background: linear-gradient(180deg, #f0e2bd, var(--colorPaperShade));

    clip-path: polygon(0 0, 100% 0, 50% 100%);

    border-radius: 0.6rem 0.6rem 0 0;

    transform-origin: top center;

    transition: transform 0.85s var(--easeCinematic);

    z-index: 4;

    box-shadow: inset 0 -2px 4px rgba(90, 58, 36, 0.2);

}

.invitationEnvelope.isOpening .envelopeFlap
{

    transform: rotateX(-175deg);

    z-index: 1;

}

/* ── Fishhook seal ── */

.envelopeSeal
{

    position: absolute;

    top: 44%;

    left: 50%;

    z-index: 5;

    width: 3.7rem;

    height: 3.7rem;

    transform: translate(-50%, -50%);

    filter: drop-shadow(0 0 12px rgba(255, 217, 138, 0.75));

    animation: sealGlow 3s ease-in-out infinite alternate;

    transition: transform var(--durationMedium) var(--easeCinematic), opacity var(--durationMedium) ease;

}

.invitationEnvelope.isOpening .envelopeSeal
{

    transform: translate(-50%, -50%) scale(1.5) rotate(24deg);

    opacity: 0;

}

/* ── Prompt ── */

.envelopePrompt
{

    position: absolute;

    bottom: -2.6rem;

    left: 50%;

    transform: translateX(-50%);

    font-size: 0.85rem;

    font-weight: 600;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    white-space: nowrap;

    color: rgba(248, 239, 217, 0.95);

    text-shadow: 0 2px 10px rgba(11, 39, 64, 0.6);

    animation: promptPulse 2.4s ease-in-out infinite;

}

.invitationEnvelope.isOpening .envelopePrompt
{

    /* The pulse animation would override opacity, so stop it too. */

    animation: none;

    opacity: 0;

}

/* ── Heihei cameo ── */

.heiheiCameo
{

    position: absolute;

    top: 8%;

    right: 6%;

    z-index: 2;

    width: 5.5rem;

    height: 5.5rem;

    opacity: 0;

    transform: translateY(60%) rotate(14deg) scale(0.6);

    pointer-events: none;

}

.heiheiCameo img
{

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top;

    border-radius: 50%;

    border: 3px solid var(--colorGlow);

    box-shadow: 0 10px 24px rgba(6, 20, 34, 0.45);

}

.heiheiCameo.isPopping
{

    animation: heiheiPop 4.5s var(--easeCinematic) forwards;

}

/* ── Skip intro ── */

.skipIntroButton
{

    margin-top: 4.25rem;

    padding: 0.45rem 0.9rem;

    font-size: 0.8rem;

    font-weight: 500;

    color: rgba(248, 239, 217, 0.65);

    text-decoration: underline;

    text-underline-offset: 0.3em;

    border-radius: 999px;

    transition: color var(--durationFast) ease;

}

.skipIntroButton:hover
{

    color: var(--colorGlow);

}

/* ── Envelope opened state ── */

.envelopeStage.isOpened .invitationEnvelope
{

    cursor: default;

    animation: none;

}

.heroSection.isDimmed::after
{

    content: '';

    position: absolute;

    inset: 0;

    z-index: 2;

    background: rgba(6, 18, 32, 0.4);

    animation: fadeIn 0.6s ease both;

}


/* ============================================================
   INVITATION MODAL
============================================================ */

.invitationOverlay
{

    position: fixed;

    inset: 0;

    z-index: 120;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.25rem;

    background: rgba(6, 18, 32, 0.78);

    backdrop-filter: blur(8px);

    overflow-y: auto;

}

.invitationOverlay.isVisible .invitationModal
{

    animation: invitationRise 0.8s var(--easeCinematic) both;

}

.invitationModal
{

    position: relative;

    width: min(30rem, 100%);

    margin: auto;

}

.invitationClose
{

    position: absolute;

    top: -0.9rem;

    right: -0.9rem;

    z-index: 2;

    display: grid;

    place-items: center;

    width: 2.75rem;

    height: 2.75rem;

    font-size: 1.5rem;

    line-height: 1;

    color: var(--colorPaper);

    background-color: var(--colorDeepOcean);

    border: 1px solid rgba(255, 217, 138, 0.5);

    border-radius: 50%;

    box-shadow: 0 6px 18px rgba(6, 18, 32, 0.5);

}

.invitationCard
{

    position: relative;

    overflow: hidden;

    text-align: center;

    color: var(--colorInk);

    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.5), transparent 40%),
        repeating-linear-gradient(45deg, rgba(51, 32, 15, 0.04) 0 2px, transparent 2px 10px),
        linear-gradient(180deg, #fffaf0, var(--colorPaper));

    border-radius: 1rem;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(90, 58, 36, 0.25);

}

/* ── Ocean artwork band with the carved wooden sign ── */

.invitationArt
{

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 10.5rem;

    padding: 1.5rem 1.25rem;

    background-image:
        linear-gradient(180deg, rgba(11, 39, 64, 0.15), rgba(11, 39, 64, 0.35)),
        url('../images/backgrounds/waveArt.webp');

    background-size: cover;

    background-position: center 30%;

    background-color: var(--colorLagoon);

}

.invitationWoodSign
{

    position: relative;

    padding: 1rem 1.75rem;

    background:
        repeating-linear-gradient(180deg, rgba(51, 32, 15, 0.12) 0 3px, transparent 3px 9px),
        linear-gradient(175deg, #8a5a33, #5a3a24 70%, #4a2f1c);

    border: 3px solid #3f2817;

    border-radius: 0.75rem;

    box-shadow:
        0 10px 26px rgba(6, 18, 32, 0.5),
        inset 0 1px 0 rgba(255, 226, 170, 0.35);

    transform: rotate(-1.5deg);

}

.invitationWoodSign::before,
.invitationWoodSign::after
{

    content: '';

    position: absolute;

    top: -0.55rem;

    width: 0.55rem;

    height: 0.55rem;

    background-color: #3f2817;

    border-radius: 50%;

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);

}

.invitationWoodSign::before
{

    left: 18%;

}

.invitationWoodSign::after
{

    right: 18%;

}

.invitationHeading
{

    font-size: clamp(1.6rem, 5.5vw, 2.1rem);

    letter-spacing: 0.02em;

    color: var(--colorGlow);

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);

}

/* ── Card body ── */

.invitationBody
{

    padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.25rem, 5vw, 2.25rem) clamp(1.75rem, 5vw, 2.5rem);

}

.invitationSupportHeading
{

    font-family: var(--fontDisplay);

    font-size: clamp(1.15rem, 4vw, 1.4rem);

    font-weight: 700;

    color: var(--colorWoodDark);

}

.invitationCopy
{

    max-width: 24rem;

    margin: 0.9rem auto 0;

    color: rgba(43, 28, 18, 0.82);

}

.invitationDivider
{

    width: 5.5rem;

    height: 6px;

    margin: 1.4rem auto;

    background:
        linear-gradient(135deg, var(--colorSunsetOrange) 25%, transparent 25%) -3px 0 / 6px 6px,
        linear-gradient(225deg, var(--colorSunsetOrange) 25%, transparent 25%) -3px 0 / 6px 6px;

    background-repeat: repeat-x;

}

.invitationDetails
{

    display: grid;

    gap: 1.1rem;

}

.invitationDetail dt
{

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: var(--colorSunsetOrange);

}

.invitationDetail dd
{

    margin-top: 0.3rem;

    font-size: 1.05rem;

    font-weight: 600;

    line-height: 1.45;

    color: var(--colorWoodDark);

}

.invitationRsvpNote
{

    margin-top: 1.4rem;

    font-size: 0.95rem;

    color: rgba(43, 28, 18, 0.8);

}

.invitationRsvpNote a
{

    font-weight: 700;

    color: var(--colorOcean);

    text-decoration: underline;

    text-underline-offset: 0.2em;

}

.invitationActions
{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.85rem;

    margin-top: 1.4rem;

}

.invitationActions .ghostButton
{

    color: var(--colorWood);

    border-color: rgba(90, 58, 36, 0.5);

}

.invitationActions .ghostButton:hover
{

    background-color: rgba(90, 58, 36, 0.08);

}

.invitationClosing
{

    margin-top: 1.5rem;

    font-family: var(--fontDisplay);

    font-size: 1.05rem;

    font-weight: 700;

    font-style: italic;

    color: var(--colorOcean);

}


/* ============================================================
   VOYAGE SECTION
============================================================ */

.voyageSection
{

    position: relative;

    padding: var(--spaceSection) 0;

    background: linear-gradient(180deg, var(--colorMidnight) 0%, var(--colorDeepOcean) 45%, #10505c 100%);

}

.voyageOceanTransition
{

    position: absolute;

    top: -1px;

    left: 0;

    width: 100%;

    height: 5rem;

    background: linear-gradient(180deg, var(--colorMidnight), transparent);

    pointer-events: none;

}

/* ── Countdown ── */

.countdownPanel
{

    position: relative;

    z-index: 2;

    max-width: 38rem;

    margin: 3rem auto 0;

    padding: 1.75rem 1.25rem;

    text-align: center;

    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07), transparent 50%),
        linear-gradient(180deg, #4a2f1c, var(--colorWoodDark));

    border: 1px solid rgba(255, 217, 138, 0.35);

    border-radius: var(--radiusSoft);

    box-shadow: 0 20px 45px rgba(4, 12, 22, 0.5);

}

.countdownUnits
{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0.5rem;

}

.countdownValue
{

    display: block;

    font-family: var(--fontDisplay);

    font-size: clamp(1.9rem, 7vw, 3rem);

    font-weight: 900;

    color: var(--colorGlow);

    font-variant-numeric: tabular-nums;

}

.countdownLabel
{

    display: block;

    margin-top: 0.15rem;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: rgba(246, 231, 193, 0.75);

}

.countdownMessage
{

    font-family: var(--fontDisplay);

    font-size: clamp(1.3rem, 4.5vw, 1.9rem);

    font-weight: 700;

    letter-spacing: 0.12em;

    color: var(--colorGlow);

}

/* ── Voyage map and detail islands ── */

.voyageMap
{

    position: relative;

    max-width: 52rem;

    margin: 4rem auto 0;

    padding: 0 1.25rem;

}

.voyageRoute
{

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}

.detailIsland
{

    position: relative;

    z-index: 2;

    width: min(24rem, 100%);

    margin: 0 auto 2.75rem;

    padding: 1.9rem 1.75rem;

    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.08), transparent 55%),
        linear-gradient(180deg, rgba(31, 180, 196, 0.35), rgba(14, 61, 86, 0.85));

    border: 1px solid rgba(73, 216, 208, 0.35);

    border-radius: var(--radiusOrganic);

    box-shadow: 0 18px 40px rgba(4, 12, 22, 0.45);

    opacity: 0;

    transform: translateY(2rem);

    transition: opacity var(--durationSlow) ease, transform var(--durationSlow) var(--easeCinematic);

}

.detailIsland.isRevealed
{

    opacity: 1;

    transform: translateY(0);

}

.detailIslandGlyph
{

    display: grid;

    place-items: center;

    width: 3.4rem;

    height: 3.4rem;

    margin-bottom: 1rem;

    color: var(--colorGlow);

    background: rgba(255, 217, 138, 0.12);

    border: 1px solid rgba(255, 217, 138, 0.4);

    border-radius: 50%;

}

.detailIslandGlyph svg
{

    width: 1.8rem;

    height: 1.8rem;

}

.detailIslandTitle
{

    font-size: 1.2rem;

    letter-spacing: 0.06em;

    color: var(--colorSeafoam);

    text-transform: uppercase;

}

.detailIslandText
{

    margin-top: 0.5rem;

    font-size: 1.15rem;

    font-weight: 600;

    color: var(--colorPaper);

}

.detailIslandNote
{

    margin-top: 0.4rem;

    font-size: 0.95rem;

    color: rgba(246, 231, 193, 0.75);

}

.detailIslandNote a
{

    font-weight: 600;

    color: var(--colorGlow);

    text-decoration: underline;

    text-underline-offset: 0.2em;

}

/* ── Voyage actions ── */

.voyageActions
{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1rem;

    margin-top: 1.5rem;

    padding: 0 1.25rem;

}


/* ============================================================
   RSVP SECTION
============================================================ */

.rsvpSection
{

    position: relative;

    padding: var(--spaceSection) 1.25rem calc(var(--spaceSection) + 2rem);

    background:
        radial-gradient(ellipse 90% 40% at 50% 0%, rgba(73, 216, 208, 0.18), transparent 65%),
        linear-gradient(180deg, #10505c 0%, var(--colorDeepOcean) 55%, var(--colorMidnight) 100%);

}

.rsvpPanel
{

    position: relative;

    max-width: 38rem;

    margin: 3rem auto 0;

    padding: clamp(1.75rem, 5vw, 3rem);

    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 40%),
        repeating-linear-gradient(45deg, rgba(51, 32, 15, 0.04) 0 2px, transparent 2px 10px),
        linear-gradient(180deg, #fffaf0, var(--colorPaper));

    border-radius: 1.25rem;

    box-shadow:
        0 30px 70px rgba(4, 12, 22, 0.55),
        inset 0 0 0 1px rgba(90, 58, 36, 0.25);

    color: var(--colorInk);

}

.rsvpPanelCarving
{

    position: absolute;

    top: 0.8rem;

    left: 50%;

    width: 7rem;

    height: 6px;

    transform: translateX(-50%);

    background:
        linear-gradient(135deg, rgba(90, 58, 36, 0.5) 25%, transparent 25%) -3px 0 / 6px 6px,
        linear-gradient(225deg, rgba(90, 58, 36, 0.5) 25%, transparent 25%) -3px 0 / 6px 6px;

    background-repeat: repeat-x;

}


/* ============================================================
   FORMS
============================================================ */

.rsvpForm
{

    display: grid;

    gap: 1.4rem;

    margin-top: 0.75rem;

}

.formRow
{

    display: grid;

    gap: 1.4rem;

}

.formField
{

    display: grid;

    gap: 0.4rem;

}

.formLabel
{

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--colorWoodDark);

}

.requiredMark
{

    color: var(--colorSunsetOrange);

}

.formInput
{

    width: 100%;

    min-height: 3rem;

    padding: 0.7rem 1rem;

    font-size: 1rem;

    color: var(--colorInk);

    background-color: rgba(255, 255, 255, 0.75);

    border: 1.5px solid rgba(90, 58, 36, 0.35);

    border-radius: 0.7rem;

    transition: border-color var(--durationFast) ease, box-shadow var(--durationFast) ease;

}

.formInput:focus
{

    outline: none;

    border-color: var(--colorSunsetOrange);

    box-shadow: 0 0 0 3px rgba(255, 138, 77, 0.25);

}

.formInput.hasError
{

    border-color: #c0392b;

    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);

}

.formTextarea
{

    resize: vertical;

    min-height: 6rem;

}

.fieldError
{

    font-size: 0.85rem;

    font-weight: 600;

    color: #b03024;

}

.formFieldset
{

    display: grid;

    gap: 0.75rem;

    border: none;

}

/* ── Attendance choice cards ── */

.attendanceOptions
{

    display: grid;

    gap: 0.75rem;

}

.attendanceOption
{

    position: relative;

}

.attendanceOption input
{

    position: absolute;

    opacity: 0;

    pointer-events: none;

}

.attendanceOptionCard
{

    display: block;

    padding: 1rem 1.25rem;

    background-color: rgba(255, 255, 255, 0.6);

    border: 2px solid rgba(90, 58, 36, 0.3);

    border-radius: 0.85rem;

    cursor: pointer;

    transition: border-color var(--durationFast) ease, background-color var(--durationFast) ease, transform var(--durationFast) ease;

}

.attendanceOption input:checked + .attendanceOptionCard
{

    border-color: var(--colorSunsetOrange);

    background-color: rgba(255, 194, 94, 0.18);

    transform: translateY(-1px);

}

.attendanceOption input:focus-visible + .attendanceOptionCard
{

    outline: 3px solid var(--colorSunsetOrange);

    outline-offset: 2px;

}

.attendanceOptionTitle
{

    display: block;

    font-weight: 700;

    color: var(--colorWoodDark);

}

.attendanceOptionNote
{

    display: block;

    margin-top: 0.15rem;

    font-size: 0.85rem;

    color: rgba(43, 28, 18, 0.65);

}

/* ── Conditional attending fields ──
   Collapses smoothly via the grid-template-rows transition;
   visibility flips after the collapse so hidden inputs leave
   the tab order. */

.attendingFields
{

    display: grid;

    grid-template-rows: 1fr;

    margin-top: 0;

    opacity: 1;

    visibility: visible;

    transition:
        grid-template-rows 450ms var(--easeCinematic),
        margin-top 450ms var(--easeCinematic),
        opacity 300ms ease 100ms,
        visibility 0s 0s;

}

/* The negative margin swallows the parent form gap while
   collapsed so surrounding spacing stays intentional. */

.attendingFields.isHidden
{

    grid-template-rows: 0fr;

    margin-top: -1.4rem;

    opacity: 0;

    visibility: hidden;

    transition:
        grid-template-rows 450ms var(--easeCinematic),
        margin-top 450ms var(--easeCinematic),
        opacity 250ms ease,
        visibility 0s 450ms;

}

.attendingFieldsInner
{

    display: grid;

    gap: 1.4rem;

    min-height: 0;

    overflow: hidden;

}

/* ── Honeypot ── */

.honeypotField
{

    position: absolute;

    left: -6000px;

    width: 1px;

    height: 1px;

    overflow: hidden;

}

/* ── Submit button ── */

.rsvpSubmitButton
{

    position: relative;

    width: 100%;

    min-height: 3.6rem;

    font-size: 1.05rem;

}

.rsvpSubmitButton:disabled
{

    opacity: 0.75;

    cursor: wait;

    transform: none;

}

.rsvpSubmitSpinner
{

    display: none;

    width: 1.3rem;

    height: 1.3rem;

    border: 3px solid rgba(11, 39, 64, 0.25);

    border-top-color: var(--colorMidnight);

    border-radius: 50%;

    animation: spinnerTurn 0.8s linear infinite;

}

.rsvpSubmitButton.isLoading .rsvpSubmitSpinner
{

    display: inline-block;

}

.rsvpSubmitButton.isLoading .rsvpSubmitLabel
{

    opacity: 0.7;

}

/* ── Status message ── */

.formStatus
{

    min-height: 1.4rem;

    text-align: center;

    font-weight: 600;

}

.formStatus.isError
{

    color: #b03024;

}

.formStatus.isSuccess
{

    color: #14795c;

}

/* ── Success panel ── */

.rsvpSuccess
{

    text-align: center;

    padding: 1rem 0;

}

.rsvpSuccessHeihei
{

    width: 6.5rem;

    height: 6.5rem;

    margin: 0 auto 1.25rem;

    animation: heiheiWiggle 0.7s ease-in-out 3;

}

.rsvpSuccessHeihei img
{

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top;

    border-radius: 50%;

    border: 4px solid var(--colorGlow);

    box-shadow: 0 10px 26px rgba(6, 20, 34, 0.35);

}

.rsvpSuccessHeading
{

    font-size: clamp(1.4rem, 5vw, 1.9rem);

    letter-spacing: 0.08em;

    color: var(--colorWoodDark);

}

.rsvpSuccessMessage
{

    max-width: 26rem;

    margin: 1rem auto 1.75rem;

    color: rgba(43, 28, 18, 0.8);

}

.rsvpSuccess .ghostButton
{

    color: var(--colorWood);

    border-color: rgba(90, 58, 36, 0.5);

}

.rsvpSuccess .ghostButton:hover
{

    background-color: rgba(90, 58, 36, 0.08);

}


/* ============================================================
   FOOTER
============================================================ */

.footerSection
{

    padding: 3.5rem 1.25rem calc(3.5rem + env(safe-area-inset-bottom, 0px));

    text-align: center;

    background-color: var(--colorMidnight);

    border-top: 1px solid rgba(73, 216, 208, 0.15);

}

.footerHook
{

    width: 2.2rem;

    margin: 0 auto 1rem;

}

.footerLine
{

    font-size: 0.95rem;

    color: rgba(246, 231, 193, 0.8);

}

.footerContact
{

    margin-top: 0.5rem;

    font-size: 0.9rem;

    color: rgba(246, 231, 193, 0.6);

}

.footerContact a
{

    color: var(--colorGlow);

    text-decoration: underline;

    text-underline-offset: 0.2em;

}


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

@keyframes fadeUp
{

    from
    {

        opacity: 0;

        transform: translateY(1.4rem);

    }

    to
    {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes fadeIn
{

    from
    {

        opacity: 0;

    }

    to
    {

        opacity: 1;

    }

}

@keyframes sunPulse
{

    0%,
    100%
    {

        transform: translate(-50%, -50%) scale(1);

        opacity: 0.95;

    }

    50%
    {

        transform: translate(-50%, -50%) scale(1.06);

        opacity: 1;

    }

}

@keyframes cloudDrift
{

    from
    {

        transform: translateX(-12%);

    }

    to
    {

        transform: translateX(112%);

    }

}

@keyframes waveSway
{

    from
    {

        transform: translateX(0);

    }

    to
    {

        transform: translateX(6%);

    }

}

@keyframes foliageSway
{

    from
    {

        transform: rotate(0deg);

    }

    to
    {

        transform: rotate(2.5deg);

    }

}

@keyframes mauiBreathe
{

    0%,
    100%
    {

        transform: translateY(0) scale(1);

    }

    50%
    {

        transform: translateY(-0.4rem) scale(1.012);

    }

}

@keyframes heiheiPop
{

    0%
    {

        opacity: 0;

        transform: translateY(60%) rotate(14deg) scale(0.6);

    }

    12%
    {

        opacity: 1;

        transform: translateY(-18%) rotate(-6deg) scale(1.05);

    }

    20%
    {

        transform: translateY(0) rotate(4deg) scale(1);

    }

    80%
    {

        opacity: 1;

        transform: translateY(0) rotate(-3deg) scale(1);

    }

    100%
    {

        opacity: 0;

        transform: translateY(60%) rotate(14deg) scale(0.6);

    }

}

@keyframes heiheiWiggle
{

    0%,
    100%
    {

        transform: rotate(0deg);

    }

    25%
    {

        transform: rotate(-7deg);

    }

    75%
    {

        transform: rotate(7deg);

    }

}

@keyframes scrollCueDrop
{

    0%
    {

        opacity: 1;

        transform: translate(-50%, 0);

    }

    70%
    {

        opacity: 0;

        transform: translate(-50%, 0.9rem);

    }

    100%
    {

        opacity: 0;

        transform: translate(-50%, 0);

    }

}

@keyframes envelopeFloat
{

    0%,
    100%
    {

        transform: translateY(0) rotate(-0.6deg);

    }

    50%
    {

        transform: translateY(-0.7rem) rotate(0.6deg);

    }

}

@keyframes sealGlow
{

    from
    {

        filter: drop-shadow(0 0 8px rgba(255, 217, 138, 0.5));

    }

    to
    {

        filter: drop-shadow(0 0 18px rgba(255, 217, 138, 0.95));

    }

}

@keyframes promptPulse
{

    0%,
    100%
    {

        opacity: 0.65;

    }

    50%
    {

        opacity: 1;

    }

}

@keyframes glowSweepTravel
{

    0%
    {

        opacity: 0;

        transform: translateX(100%);

    }

    15%
    {

        opacity: 1;

    }

    85%
    {

        opacity: 1;

    }

    100%
    {

        opacity: 0;

        transform: translateX(-100%);

    }

}

@keyframes hookEnter
{

    0%
    {

        opacity: 0;

        transform: translate(120%, -70%) rotate(38deg);

    }

    60%
    {

        opacity: 1;

        transform: translate(-46%, -54%) rotate(-8deg);

    }

    100%
    {

        opacity: 1;

        transform: translate(-42%, -52%) rotate(0deg);

    }

}

@keyframes hookStrike
{

    0%
    {

        transform: translate(-42%, -52%) rotate(0deg);

    }

    35%
    {

        transform: translate(-50%, -46%) rotate(-16deg) scale(1.05);

    }

    100%
    {

        opacity: 0;

        transform: translate(30%, -85%) rotate(24deg) scale(0.85);

    }

}

@keyframes sparkPop
{

    0%
    {

        opacity: 0;

        transform: scale(0.4);

    }

    35%
    {

        opacity: 1;

        transform: scale(1.4);

    }

    100%
    {

        opacity: 0;

        transform: scale(0.6) translateY(-8px);

    }

}

@keyframes cardRise
{

    from
    {

        transform: translateY(6%);

    }

    to
    {

        transform: translateY(-34%);

    }

}

@keyframes invitationRise
{

    from
    {

        opacity: 0;

        transform: translateY(3rem) scale(0.92);

    }

    to
    {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}

@keyframes spinnerTurn
{

    to
    {

        transform: rotate(360deg);

    }

}


/* ============================================================
   MEDIA QUERIES
============================================================ */

/* ── Tablet and up ── */

@media (min-width: 640px)
{

    .formRow
    {

        grid-template-columns: 1fr 1fr;

    }

    .attendanceOptions
    {

        grid-template-columns: 1fr 1fr;

    }

}

@media (min-width: 768px)
{

    .detailIslandLeft
    {

        margin-left: 0;

    }

    .detailIslandRight
    {

        margin-right: 0;

    }

}

/* ── Wide screens: give Maui room beside the envelope ── */

@media (min-width: 1100px)
{

    .heroMaui
    {

        right: clamp(0rem, 4vw, 6rem);

        bottom: 4%;

    }

}

/* ── Phones: crop Maui into the right edge intentionally ── */

@media (max-width: 767px)
{

    .heroMaui
    {

        right: -14vw;

        bottom: 1%;

        width: 52vw;

        opacity: 0.95;

    }

    .heiheiCameo
    {

        top: 4%;

        right: 2%;

        width: 4.5rem;

        height: 4.5rem;

    }

}

/* ── Small phones ── */

@media (max-width: 360px)
{

    .heroHeadingSecondary
    {

        letter-spacing: 0.16em;

    }

    .countdownUnits
    {

        grid-template-columns: repeat(2, 1fr);

        row-gap: 1rem;

    }

    .invitationClose
    {

        top: 0.4rem;

        right: 0.4rem;

    }

}

/* ── Short viewports ── */

@media (max-height: 640px)
{

    .heroSection
    {

        padding-top: 3.25rem;

    }

    .envelopeStage
    {

        margin-top: 1.25rem;

    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    html
    {

        scroll-behavior: auto;

    }

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

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

    .detailIsland
    {

        opacity: 1;

        transform: none;

    }

    .heroParticles
    {

        display: none;

    }

    .heiheiCameo
    {

        display: none;

    }

}