/* ==========================================================================
   EVENTS — Desktop (1280px – 1920px)
   Placeholder shell — real content comes later (around the mascot's
   birthday). For now: white screen, menu, profile widget, and the
   settings/message/shop buttons, same as the portfolio hero.
   ========================================================================== */

.events {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

/* Settings/message/shop buttons sit a little higher here than the
   actions.desktop.css default (bottom: 7rem) — same treatment as the
   portfolio hero. */
.settings-btn,
.message-btn,
.shop-wrap {
    bottom: 5rem;
}

/* Keeps the settings panel exactly 14px above the button's top edge,
   matching the button's raised position on this page. */
.settings-panel {
    bottom: 11rem;
}

/* Layer order (bottom to top): color-splatter background, the two
   floating decorative elements, then the mascot artwork (transparent
   around him) on top, then the headline text. */
/* Load-in sequence: backgrounds fade+zoom together first (same
   technique as the portfolio hero), then the two photos fade in while
   sliding in from their own sides, then the headline fades in one
   line at a time. */
.events-bg-fanart,
.events-mascot-bg {
    opacity: 0;
    animation: events-bg-reveal 6.8s both;
    animation-delay: 0.2s;
}

@keyframes events-bg-reveal {
    0%   { opacity: 0; scale: 1; animation-timing-function: ease; }
    25%  { opacity: 1; scale: 1; animation-timing-function: ease-out; }
    100% { opacity: 1; scale: 1.08; }
}

.events-bg-fanart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.events-element {
    position: absolute;
    z-index: 1;
}

.events-element--1 {
    top: 17.8rem;
    right: 27.4rem;
    width: 37.1rem;
    height: 34.2rem;
    opacity: 0;
    animation: events-fade-in 0.6s ease-out both, events-float-1 2.5s ease-in-out infinite alternate;
    animation-delay: 1s, 1.6s;
}

.events-element--2 {
    top: 76rem;
    right: 92rem;
    width: 18rem;
    height: 16.5rem;
    z-index: 2;
    opacity: 0;
    animation: events-fade-in 0.6s ease-out both, events-float-2 2.25s ease-in-out infinite alternate;
    animation-delay: 1.2s, 1.8s;
}

@keyframes events-float-1 {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(1rem, -1rem); }
}

@keyframes events-float-2 {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-1rem, -1rem); }
}

.events-mascot-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
}

/* Top-left nav row — flex + gap holds a 40px gap automatically in
   every language, no manual html[data-lang] overrides needed. */
.events-nav {
    position: absolute;
    left: 5rem;
    top: 5rem;
    display: flex;
    align-items: baseline;
    gap: 4rem;
    z-index: 5;
}

.events-nav-link {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.events-nav-link:hover {
    opacity: 0.5;
}

.events-nav-link--homepage {
    text-transform: uppercase;
}

.events-nav-link.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Tilted photo cutouts — bob up and down, faster than the two
   decorative elements, and in opposite phase to each other. */
.events-photo {
    position: absolute;
    z-index: 4;
}

.events-photo--ian {
    left: 10rem;
    top: 16.5rem;
    width: 30rem;
    height: 42.5rem;
    opacity: 0;
    animation: events-photo-in-left 0.8s ease-out both;
    animation-delay: 1.4s;
}

.events-photo--shattics {
    left: 37.8rem;
    top: 18rem;
    width: 27rem;
    height: 38.1rem;
    opacity: 0;
    animation: events-photo-in-right 0.8s ease-out both;
    animation-delay: 1.6s;
}

@keyframes events-photo-in-left {
    from { opacity: 0; transform: translateX(-4rem) rotate(-3.5deg); }
    to   { opacity: 1; transform: translateX(0) rotate(-3.5deg); }
}

@keyframes events-photo-in-right {
    from { opacity: 0; transform: translateX(4rem) rotate(4.48deg); }
    to   { opacity: 1; transform: translateX(0) rotate(4.48deg); }
}

.events-headline {
    position: absolute;
    left: 5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 15rem;
    line-height: 12.5rem;
    letter-spacing: -0.1em;
    color: #000000;
    -webkit-text-fill-color: #000000;
    -webkit-text-stroke: 0.5rem #ffffff;
    paint-order: stroke fill;
    z-index: 4;
}

.events-headline--1 {
    top: 65.6rem;
    opacity: 0;
    animation: events-fade-in 0.6s ease-out both;
    animation-delay: 2.4s;
}

.events-headline--2 {
    top: 76.8rem;
    opacity: 0;
    animation: events-fade-in 0.6s ease-out both;
    animation-delay: 2.8s;
}

@keyframes events-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}