/* Foundation Gala — base stylesheet */

/* Fonts ---------------------------------------------------- */

@font-face {
    font-family: "Syllabus";
    src: url("../assets/fonts/Syllabus-0324-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Syllabus";
    src: url("../assets/fonts/Syllabus-0324-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Custom properties -------------------------------------- */

:root {
    --color-bg: #000000;
    --color-text: #ffffff;
    --color-text-muted: #a8a8a8;
    --color-accent: #ffffff;
    --color-border: #ffffff;
    --color-border-muted: rgba(255, 255, 255, 0.25);
    --color-theme: #FF82FF;


    --font-body: "Syllabus", Arial, Helvetica, sans-serif;
    --font-display: var(--font-body);
    --font-color-black: var(--color-bg);

    --fontWeight-base: 400;
    --fontWeight-medium: 500;

    --lineHeight-middle: 1.2;
    --lineHeight-tall: 1.3;

    /* Type scale. Each step is fluid between the design's two targets —
       375px and 1400px — and locks at both ends. The px pairs in the
       comments are the design values; the rem+vw middle term is the line
       through them, so retuning a step means recomputing all three parts.
       Steps --1 and 0 meet at 30px on desktop and only separate as the
       viewport narrows. */
    --fontSize-step--1: clamp(1rem, 0.6799rem + 1.3659vw, 1.875rem);      /* 16 → 30 */
    --fontSize-step-0: clamp(1.375rem, 1.1921rem + 0.7805vw, 1.875rem);   /* 22 → 30 */
    --fontSize-step-1: clamp(1.5rem, 1.1341rem + 1.561vw, 2.5rem);        /* 24 → 40 */

    /* Chrome sizes. The footer and the ribbon labels sit outside the
       editorial scale — they don't grow with it. */
    --fontSize-ui-small: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --fontSize-ui-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

    /* Static size used by the sponsor module. */
    --fontSize-static-small: 0.96875rem;

    /* Rule weights. The sponsor module steps these up at 768px and 1440px. */
    --border-static-width-tiny: 1px;
    --border-static-width-small: 1.5px;
    --border-static-width-medium: 2px;
    --border-static-width-mediumLarge: 2.5px;
    --border-static-width-large: 3px;

        /* Tokens / Border widths / Aliases */
    --line-responsive-light: var(--border-static-width-tiny);
    --line-responsive-heavy: var(--border-static-width-medium);

    /* Spacing scale. --margin is the grid gutter and the page side margin;
       everything else is a ratio of it. The width-min/max/ideal values are
       re-declared per breakpoint below, so the whole scale steps up with
       the viewport. */
    --margin-width-min: 1.5rem;
    --margin-width-max: 1.875rem;
    --margin-width-ideal-1: 1.1422rem;
    --margin-width-ideal-2: 1.5267vw;
    --margin-width-ideal: calc(var(--margin-width-ideal-1) + var(--margin-width-ideal-2));

    --margin-below-paragraph: clamp(1.603125rem, 1.4769rem + 0.5387vw, 1.96171875rem);

    --margin-tiny: clamp(var(--margin-width-min)/14, var(--margin-width-ideal)/14, var(--margin-width-max)/14);
    --margin-eighth: clamp(var(--margin-width-min)/8, var(--margin-width-ideal)/8, var(--margin-width-max)/8);
    --margin-quarter: clamp(var(--margin-width-min)/4, var(--margin-width-ideal)/4, var(--margin-width-max)/4);
    --margin-third: clamp(var(--margin-width-min)/3, var(--margin-width-ideal)/3, var(--margin-width-max)/3);
    --margin-half: clamp(var(--margin-width-min)/2, var(--margin-width-ideal)/2, var(--margin-width-max)/2);
    --margin-small: clamp(var(--margin-width-min)/1.65, var(--margin-width-ideal)/1.65, var(--margin-width-max)/1.65);
    --margin-threeQuarter: clamp(3 * var(--margin-width-min)/4, 3 * var(--margin-width-ideal)/4, 3 * var(--margin-width-max)/4);
    --margin: clamp(var(--margin-width-min), var(--margin-width-ideal), var(--margin-width-max));
    --margin-one-and-a-half: clamp(var(--margin-width-min)*1.5, var(--margin-width-ideal)*1.5, var(--margin-width-max)*1.5);
    --margin-double: clamp(var(--margin-width-min)*2, var(--margin-width-ideal)*2, var(--margin-width-max)*2);
    --margin-triple: clamp(var(--margin-width-min)*3, var(--margin-width-ideal)*3, var(--margin-width-max)*3);


    /* siteheader-logo */
    --min-logo-width: 6.09375rem;
    --max-logo-width: 7.33625rem;
    --ideal-logo-width-1: 4.9082rem;
    --ideal-logo-width-2: 5.0585vw;
    --logo-width: clamp(var(--min-logo-width), var(--ideal-logo-width-1) + var(--ideal-logo-width-2), var(--max-logo-width));

    --hero-max-width: auto;
}

@media screen and (min-width: 768px) {
    :root {
        --margin-width-min: 1.875rem;
        --margin-width-max: 2.375rem;
        --margin-width-ideal-1: -0.1250rem;
        --margin-width-ideal-2: 4.1667vw;

        /* siteheader-logo */
        --min-logo-width: 7.33625rem;
        --max-logo-width: 9.096875rem;
        --ideal-logo-width-1: 0.2937rem;
        --ideal-logo-width-2: 14.6719vw;
    }
}

@media screen and (min-width: 960px) {
    :root {
        --margin-width-min: 2.375rem;
        --margin-width-max: 2.875rem;
        --margin-width-ideal-1: 1.3750rem;
        --margin-width-ideal-2: 1.6667vw;

        /* siteheader-logo */
        --min-logo-width: 9.096875rem;
        --max-logo-width: 11.560625rem;
        --ideal-logo-width-1: 4.1694rem;
        --ideal-logo-width-2: 8.2125vw;
    }
}

/* Reset --------------------------------------------------- */

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

body,
h1, h2, h3, h4,
p,
figure,
blockquote,
ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Base elements ------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fontSize-step-0);
    /* line-height: 1.5; */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.1;
    text-wrap: balance;
}

h1 { font-size: var(--fontSize-step-1); }
h2 { font-size: var(--fontSize-step-0); }
h3 { font-size: var(--fontSize-step-0); }

p {
    text-wrap: pretty;
}
h2, p {
    font-weight: 400;
    margin-bottom: var(--margin-below-paragraph);
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Layout -------------------------------------------------- */

.grid {
    display: grid;
    grid-column-gap: var(--margin);
    grid-template-columns: [full-start fullOffset-start medium-start centralHalf-start central-start] 1fr [centralOffset-start] repeat(5, 1fr) [full-end medium-end centralHalf-end centralOffset-end centralOdd-end central-end];
}

@media screen and (min-width: 768px) {
    .grid {
        grid-template-columns: [full-start centralOffset-start] 1fr [fullOffset-start medium-start centralHalf-start central-start] repeat(3, 1fr) [centralOffset-end] 1fr [centralHalf-end] repeat(4, 1fr) [medium-end centralOdd-end central-end] 1fr [full-end];
        margin-inline: var(--margin);
    }
}

@media screen and (min-width: 960px) {
    .grid {
        grid-template-columns: [full-start centralOffset-start] 1fr [fullOffset-start medium-start] 1fr [centralHalf-start central-start] repeat(2, 1fr) [centralOffset-end] 1fr [centralHalf-end] repeat(3, 1fr) [centralOdd-end central-end] 1fr [medium-end] 1fr [full-end];
    }
}

@media screen and (min-width: 1440px) {
    .grid {
        grid-template-columns: [full-start centralOffset-start] 1fr [fullOffset-start] 1fr [medium-start] 1fr [centralHalf-start central-start] repeat(2, 1fr) [centralOffset-end] 1fr [centralHalf-end] repeat(2, 1fr) [centralOdd-end] 1fr [central-end] 1fr [medium-end] repeat(2, 1fr) [full-end];
    }
}

@media screen and (min-width: 1920px) {
    .grid {
        grid-template-columns: [full-start centralOffset-start] 1fr [fullOffset-start] 1fr [medium-start] 1fr [centralHalf-start central-start] repeat(2, 1fr) [centralOffset-end] 1fr [centralHalf-end] 1fr [centralOdd-end] 1fr [central-end] repeat(2, 1fr) [medium-end] repeat(2, 1fr) [full-end];
    }
}

/* Placement utilities — widest to narrowest */

.gl-full {
    grid-column: full-start / full-end;
}

.gl-full--offset {
    grid-column: fullOffset-start / full-end;
}

.gl-medium {
    grid-column: medium-start / medium-end;
}

.gl-central {
    grid-column: central-start / central-end;
}

.gl-central--half {
    grid-column: centralHalf-start / centralHalf-end;
}

.gl-central--offset {
    grid-column: centralOffset-start / centralOffset-end;
}


.subGrid {
    display: grid;
    grid-column-gap: var(--margin);
    grid-template-columns: [fullBleed-start full-start medium-start central-start] 1fr [full-end medium-end central-end fullBleed-end true-end];
}

@media screen and (min-width: 768px) {
    .subGrid {
        grid-template-columns: [fullBleed-start full-start medium-start central-start] repeat(3, 1fr) [fullBleed-mid] repeat(5, 1fr) [central-end medium-end full-end fullBleed-end true-end];
        margin-inline: var(--margin);
    }
}

@media screen and (min-width: 960px) {
    .subGrid {
        grid-template-columns: [fullBleed-start] 1fr [full-start medium-start central-start] repeat(2, 1fr) [fullBleed-mid] repeat(4, 1fr) [central-end medium-end full-end fullBleed-end] 1fr [true-end];
    }
}

@media screen and (min-width: 1920px) {
    .subGrid {
        grid-template-columns: [fullBleed-start] 1fr [full-start medium-start central-start] repeat(2, 1fr) [fullBleed-mid] repeat(3, 1fr) [central-end medium-end full-end] 1fr [fullBleed-end] 1fr [true-end];
    }
}

.section {
    margin-inline: var(--margin);
    padding-block: var(--margin-triple);
}



.siteHeader-container {
    display: flex;
    justify-content: space-between;
    max-height: 230px;
    margin-bottom: var(--margin);
}

.siteHeader-logo {
    margin: var(--margin) var(--margin) 0;
    margin-left: auto;
    min-width: var(--min-logo-width);
    width: var(--logo-width);
}

.siteHeader-logo a {
    display: block;
}

.siteHeader-logo svg {
    fill: var(--color-text);
}

@media screen and (min-width: 768px) {
    .siteHeader {
        margin-bottom: 0;
    }

}


.hero {
    margin-inline: var(--margin);
    padding-block: var(--margin-triple);
}

.hero-intro {
    margin-top: var(--margin);
    color: var(--color-text-muted);
    font-size: var(--fontSize-step-0);
}

.address {
    color: var(--color-theme);
}

.sponsor-message {
    margin-top: var(--margin);
}

.siteFooter {
    margin-top: var(--margin-triple);
    margin-inline: var(--margin);
    padding-block: var(--margin-double);
    border-top: var(--border-static-width-tiny) solid var(--color-border-muted);
    font-size: var(--fontSize-ui-base);
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.button {
    background: var(--color-bg);
    border: var(--line-responsive-heavy) solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    display: inline-block;
    font-size: var(--fontSize-step-0);
    font-weight: var(--fontWeight-base);
    padding: var(--margin-quarter) var(--margin-half);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color ease-out 0.15s, color ease-out 0.15s;
    margin: var(--margin-half) 0;
}
.button:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

/* Promo Module */
.modulePromo {
    border-top: var(--line-responsive-heavy) solid var(--color-border);
    padding-top: var(--margin);
}

/* Sponsors module ----------------------------------------- */

.sponsorsModule-container {
    margin: 0 var(--margin) var(--margin-triple);
}

.sponsorsModule-wrapper {
    border-top: var(--border-static-width-tiny) solid var(--color-border);
}

.sponsorsModule-sponsorLine,
p.note {
    font-size: var(--fontSize-static-small);
    font-weight: var(--fontWeight-base);
    margin: calc(var(--margin-quarter) - (1/3 * var(--margin-quarter))) 0;
}

.sponsorsModule-sponsorItems {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--margin-half);
    margin-bottom: var(--margin-half);
}

.sponsorsModule-sponsorLine + .sponsorsModule-sponsorItems {
    margin-top: 0;
}

/* Mobile: one logo per row, capped so small marks don't balloon. */
.sponsorsModule-sponsorItems .logo {
    margin: 0;
    width: 100%;
    max-width: 326px;
}

.sponsorsModule-sponsorItems .logo.logo--Widest {
    max-width: 100%;
}

.sponsorsModule-sponsorItems .logo-caption {
    margin: var(--margin-quarter) 0 0;
    width: 100%;
}


@media screen and (min-width: 768px) {
    .sponsorsModule-container {
        margin: 0 var(--margin) var(--margin-double);
    }

    .sponsorsModule-wrapper {
        border-top-width: var(--border-static-width-small);
    }

    .sponsorsModule-sponsorItems .logo {
        margin: 0 var(--margin) 0 0;
        width: calc(50% - var(--margin));
    }

    .sponsorsModule-sponsorItems .logo.logo--Wider {
        margin-right: 0;
        width: calc(75% - var(--margin));
    }

    .sponsorsModule-sponsorItems .logo.logo--Widest {
        margin-right: 0;
        width: calc(100% - var(--margin));
    }

    .sponsorsModule-sponsorItems .logo:nth-child(2n) {
        margin-right: 0;
    }

    .sponsorsModule-sponsorItems .logo:last-child,
    .sponsorsModule-sponsorItems .logo:only-child {
        margin-right: 0 !important;
    }

    .sponsorsModule-sponsorItems .logo--withCaption {
        margin-right: 0;
    }

    .sponsorsModule-sponsorItems .logo-caption {
        width: 75%;
    }
}


@media screen and (min-width: 960px) {
    .sponsorsModule-sponsorItems .logo {
        width: calc(33% - (2/3 * var(--margin)));
    }

    .sponsorsModule-sponsorItems .logo.logo--Wider {
        margin-right: 0;
        width: calc(39% - var(--margin));
    }

    .sponsorsModule-sponsorItems .logo.logo--Widest {
        margin-right: 0;
        width: calc(75% - var(--margin));
    }

    .sponsorsModule-sponsorItems .logo:nth-child(2n) {
        margin-right: var(--margin);
    }

    .sponsorsModule-sponsorItems .logo:nth-child(3n) {
        margin-right: 0;
    }

    .sponsorsModule-sponsorItems .logo:nth-child(n+4) {
        margin-top: var(--margin-quarter);
    }

    .sponsorsModule-sponsorItems .logo:last-child,
    .sponsorsModule-sponsorItems .logo:only-child {
        margin-right: 0 !important;
    }
}

@media screen and (min-width: 1440px) {
    .sponsorsModule-wrapper {
        border-top-width: var(--border-static-width-medium);
    }
}

/* Sponsor block ---------------------------------------------- */

.logo-wrapper,
.logo-image--container {
    align-items: center;
    display: flex;
    justify-content: center;
    text-decoration: none;
}

.logo-image--container {
    height: 138px;
    max-height: 138px;
}

.logo-image {
    max-height: 100%;
    max-width: auto;
    width: 100%;
}

.logo-image--notSvg {
    height: auto;
    width: auto;
}

/* Jan Logan's wordmark is very wide; on mobile cap it at 110% of the
   InterContinental logo (210px) so it sits in proportion. */
.logo-image--janLogan {
    max-width: 231px;
}

@media screen and (min-width: 768px) {
    .logo-image--janLogan {
        max-width: none;
    }
}
.logo--invert .logo-image {
    filter: invert(1);
}

.logo-text p,
.logo-caption {
    color: var(--color-text);
    font-size: var(--fontSize-static-small);
    font-weight: var(--fontWeight-base);
    text-align: center;
}

.logo-caption {
    line-height: var(--lineHeight-tall);
}

.logo-subbrand {
    border-right: var(--border-static-width-medium) solid var(--color-border);
    border-top: var(--border-static-width-medium) solid var(--color-border);
    height: calc(61px + (var(--margin-quarter) - (1/3 * var(--margin-quarter))));
    margin-top: var(--margin);
    padding: calc(var(--margin-quarter) - (1/3 * var(--margin-quarter))) var(--margin-half) 0 0;
}

.logo-subbrandText {
    color: var(--color-text);
    display: table-caption;
    font-size: var(--fontSize-static-small);
    font-weight: var(--fontWeight-base);
    line-height: var(--lineHeight-tall);
}


/* Page shell ---------------------------------------------- */

.container {
    display: grid;
    position: relative;
    grid-template-areas:
        "hero logo"
        "heroImage heroImage"
        "coreContent coreContent"
        "sponsors sponsors";
}

.module {
    margin-bottom: var(--margin);
}

/* The offset description is set a step down from the body copy. The two
   converge at 30px on desktop, so the contrast only shows at mobile. */
.moduleDescription--offset {
    font-size: var(--fontSize-step--1);
    grid-column: centralOffset-start / centralOffset-end;
}

@media screen and (min-width: 768px) {
    .moduleDescription--offset {
        grid-column: central-start / full-end;
    }
}

.siteHeader {
    grid-area: logo;
}

/* .heroColumn is only a box on wide screens, where the title has to live
   inside the same element that bounds the sticky ribbons. Below that the
   two need to be independent grid items, so the wrapper is taken out of
   the box tree and its children are placed directly. */
.heroColumn {
    display: contents;
}

.hero {
    grid-area: hero;
    padding: 0;
    margin: var(--margin);
}

.hero-title {
    font-weight: 400;
}

.heroImage {
    grid-area: heroImage;
    overflow: hidden;
    margin-bottom: var(--margin);
    width: 100%;
    max-width: 500px;
    justify-self: center;
}

section.coreContent {
    grid-area: coreContent;
    margin: 0 var(--margin);
}

section.sponsorsModule {
    grid-area: sponsors;
}

@media screen and (min-width: 1279px) {
    .container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "heroColumn logo"
            "heroColumn coreContent"
            "sponsors sponsors";
    }

    .heroColumn {
        grid-area: heroColumn;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        position: relative;
    }

    .heroImage {
        position: sticky;
        top: 0;
        max-width: unset;
    }

    section.coreContent {
        margin: calc(100svh - var(--logo-width)) var(--margin);
    }
}


/* Ribbon module ------------------------------------------ */

/* Every ribbon is positioned in percentages of .ribbonsModule, so the
   composition rescales with the column width. Ribbons are anchored by
   right rather than left, so the scatter hangs off the right edge of the
   module — the edge beside the core content — and any slack collects on
   the left.

   --ribbon-width is a share of the module width too, so the ribbons hold
   their proportion instead of thinning out as the column grows. It needs
   calibrating per range, since the module is the full viewport width below
   the desktop breakpoint and half of it above. */
.ribbonsModule {
    --ribbon-width: clamp(32px, 10.2564%, 70px);
    --ribbons-height: 500px;

    /* Readable aliases for --ribbon-direction, see the motion section. */
    --up: -1;
    --down: 1;

    position: relative;
    width: 100%;
    height: var(--ribbons-height);
}

.ribbon {
    position: absolute;
    width: var(--ribbon-width);
    background-color: var(--color-theme);
    color: var(--font-color-black);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: var(--fontSize-ui-small);
    padding: 8px;
}

/* contain keeps each ribbon graphic inside its ribbon at any width. */
.ribbon img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.ribbon-6 img {
    object-position: center;
}

.ribbon-2 img,
.ribbon-4 img,
.ribbon-8 img {
    object-position: center bottom;
}

.ribbon-1 {
    right: 87.284%;
    top: 1.222%;
    height: 91.333%;
}
.ribbon-2 {
    right: 78.65%;
    top: 1.222%;
    height: 84.444%;
}
.ribbon-3 {
    right: 66%;
    top: 13.444%;
    height: 70.111%;
    z-index: 1;
}
.ribbon-4 {
    right: 56%;
    top: 46.889%;
    height: 53.111%;
}
.ribbon-5 {
    right: 44%;
    top: 1.222%;
    height: 63.556%;
}
.ribbon-6 {
    right: 32%;
    top: 1.222%;
    height: 73.111%;
    z-index: 1;
}
.ribbon-7 {
    right: 24.49%;
    top: 3.222%;
    height: 75.667%;
}
.ribbon-8 {
    right: 17.111%;
    top: 0;
    height: 77.111%;
    z-index: 1;
}
.ribbon-9 {
    right: 2%;
    top: 1.333%;
    height: 75%;
}


/* Ribbon motion ------------------------------------------ */

.animate .ribbon,
.animate .ribbon img,
.ribbon.animate,
.ribbon.animate img {
    animation-name: ribbonDrift;
    animation-duration: var(--ribbon-duration, 2s);
    animation-delay: var(--ribbon-delay, 0s);
    animation-timing-function: var(--ribbon-easing, ease-in-out);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* The bar travels the way --ribbon-direction points; the artwork inside
   it travels the same distance the opposite way, and the two cancel out
   to the artwork standing still. */
.ribbon {
    --ribbon-travel: var(--ribbon-direction, 0);
}

.ribbon img {
    --ribbon-travel: calc(var(--ribbon-direction, 0) * -1);
}

@keyframes ribbonDrift {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(
            calc(var(--ribbon-distance, 0px) * var(--ribbon-travel, 0))
        );
    }
}


.ribbon-1 {
    --ribbon-direction: var(--up);
    --ribbon-distance: 20%;
    --ribbon-duration: 6s;
}
.ribbon-2 {
    --ribbon-direction: var(--down);
    --ribbon-distance: 4%;
    --ribbon-duration: 7.5s;
}
.ribbon-3 {
    --ribbon-direction: var(--up);
    --ribbon-distance: 3%;
    --ribbon-duration: 4s;
}
.ribbon-4 {
    --ribbon-direction: var(--down);
    --ribbon-distance: 20%;
    --ribbon-duration: 7s;
}
/* TOKYO */
.ribbon-5 {
    --ribbon-direction: var(--up);
    --ribbon-distance: 25%;
    --ribbon-duration: 9.5s;
}
/* AFTER */
.ribbon-6    { 
    --ribbon-direction: var(--up);
    --ribbon-distance: 20%;
    --ribbon-duration: 6s;
}
.ribbon-7 {
    --ribbon-direction: var(--down);
    --ribbon-distance: 8%;
    --ribbon-duration: 7s;
}
/* DARK */
.ribbon-8 { 
    --ribbon-direction: var(--down);
    --ribbon-distance: 5%;
    --ribbon-duration: 9.5s;
}
.ribbon-9    {
    --ribbon-direction: var(--up);
    --ribbon-distance: 2%;
    --ribbon-duration: 3s;
}

@media screen and (min-width: 1279px) {
    .hero {
        position: absolute;
        right: 0;
        width: 50%;
        top: 79svh;
        max-width: calc(var(--hero-max-width) / 2 );
    }
    .ribbonsModule {
        --ribbon-width: calc(100% * 70 / 650);
        --ribbons-height: 100svh;

        max-width: var(--hero-max-width);
        margin-left: auto;
    }

    .ribbon {
        font-size: var(--fontSize-ui-base);
    }

    .ribbon-1 {
        --ribbon-direction: var(--up);
        --ribbon-distance: 6%;
        --ribbon-duration: 6s;
    }
    .ribbon-2 {
        --ribbon-direction: var(--down);
        --ribbon-distance: 2%;
        --ribbon-duration: 5s;
    }
    .ribbon-3 {
        --ribbon-direction: var(--up);
        --ribbon-distance: 1%;
        --ribbon-duration: 4s;
    }
    .ribbon-4 {
        --ribbon-direction: var(--down);
        --ribbon-distance: 30%;
        --ribbon-duration: 7s;
    }
    /* TOKYO */
    .ribbon-5 {
        --ribbon-direction: var(--up);
        --ribbon-distance: 15%;
        --ribbon-duration: 9.5s;
    }
    /* AFTER */
    .ribbon-6    { 
        --ribbon-direction: var(--up);
        --ribbon-distance: 13%;
        --ribbon-duration: 6s;
    }
    .ribbon-7 {
        --ribbon-direction: var(--down);
        --ribbon-distance: 6%;
        --ribbon-duration: 7s;
    }
    /* DARK */
    .ribbon-8 { 
        --ribbon-direction: var(--down);
        --ribbon-distance: 5%;
        --ribbon-duration: 9.5s;
    }
    .ribbon-9    {
        --ribbon-direction: var(--down);
        --ribbon-distance: 1%;
        --ribbon-duration: 3s;
    }
}


/* Hero title fade ---------------------------------------- */
@keyframes heroTitleFade {
    to {
        opacity: 0;
    }
}

@media screen and (min-width: 1279px) {
    @supports (animation-timeline: scroll()) {
        .hero {
            animation: heroTitleFade ease-out both;
            animation-timeline: scroll(root block);
            animation-range: 0 30svh;
            animation-duration: auto !important;
        }
    }
}