/*
 * IFA 2026 hero banner (tpl-main-test.php).
 *
 * Everything is sized in cqw (1% of the section width) — hence container-type
 * on the root — so the whole composition scales as one piece with the viewport
 * instead of drifting apart on intermediate widths.
 *
 * The height is not an aspect ratio on desktop: the banner runs down to the
 * end of the first screen. 85px is the theme header above it (measured, it
 * does not change with width); the 50cqw cap keeps the frame at 2:1 or wider,
 * which matters — the artwork is 1.95:1, so at those ratios `cover` only ever
 * trims it top and bottom and never cuts the sides off.
 *
 * Because the height now moves with the viewport, nothing vertical is a per
 * cent of it: the IFA block hangs off the top edge, the CTA off the bottom,
 * both in cqw. The extra height goes into the gap between them, the same
 * place the photo grows.
 *
 * Isolation: no top-level selectors, everything is nested under .ud-hero.
 */

.ud-hero {
    position: relative;
    container-type: inline-size;
    width: 100%;
    height: min(calc(100vh - 85px), 50vw);
    height: min(calc(100svh - 85px), 50vw);
    /* In a very short window the top and bottom groups would meet in the
       middle; below this the page scrolls instead. */
    min-height: 34vw;
    overflow: hidden;
    background: #060913;
    color: #fff;
    font-family: "Google Sans", "Roboto", sans-serif;
}

/* Media -------------------------------------------------------------- */

.ud-hero__media,
.ud-hero__media picture,
.ud-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.ud-hero__media {
    position: absolute;
    inset: 0;
}

.ud-hero__media img {
    object-fit: cover;
    object-position: center;
}

/* Spark running along the U -------------------------------------------
 *
 * The U itself is part of the photo. The svg lies over the picture with the
 * artwork's own viewBox and the same `slice` fit, so its coordinates land on
 * the painted U whatever the frame crops away — the path traces the U's
 * centre line, measured off the file.
 *
 * The U fades out towards the top of its legs (it is unlit there), so the
 * spark is masked by a gradient taken from the U's own contrast: it reads as
 * 0 at y=190 and full at the bottom of the bend, y=385.
 */

.ud-hero__spark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ud-hero__spark-path {
    fill: none;
    stroke: #fff;
    stroke-width: 26;
    stroke-linecap: round;
    /* pathLength is normalised to 1000 on the element, so one short dash and
       one gap the length of the whole path leaves exactly one travelling
       highlight. */
    stroke-dasharray: 34 966;
    opacity: 0.75;
    animation: ud-hero-spark 7s linear infinite;
}

/* Counts down: a falling offset walks the dash forward, from the top of the
   left leg, round the bend, up to the top of the right one. */
@keyframes ud-hero-spark {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Text layer --------------------------------------------------------- */

/* Nothing here takes pointer events except the CTA: the layer sits on top of
   the whole banner. */
.ud-hero__layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ud-hero__lockup,
.ud-hero__meet,
.ud-hero__cta {
    position: absolute;
    margin: 0;
}

/* Sized so the wordmark inside the lockup keeps the height it has in the
   layout; the dates then fall where IFA's own lockup puts them, which is a
   little tighter than the layout drew them by hand. */
.ud-hero__lockup {
    left: 23.15cqw;
    top: 3.84cqw;
    width: 35.47cqw;
    height: auto;
}

.ud-hero__meet {
    left: 22.5cqw;
    bottom: 10.9cqw;
    font-size: 1.55cqw;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

/* CTA: dot + arch + label -------------------------------------------- */

.ud-hero__cta {
    left: 22.35cqw;
    /* Sits on the bottom edge: the arch legs run out of the frame, they are
       not closed at the bottom. */
    bottom: 0;
    display: block;
    height: 8.65cqw;
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
}

/* The arch — the small counterpart of the big U in the artwork. Drawn as a
   box with a rounded top and no bottom border, so the legs are cut by the
   section's own overflow. */
.ud-hero__arch {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 5.25cqw;
    height: 100%;
    border: 0.25cqw solid rgba(255, 255, 255, 0.28);
    border-bottom: 0;
    border-radius: 2.625cqw 2.625cqw 0 0;
}

.ud-hero__dot {
    position: absolute;
    /* Centred on the arch, sitting just under its crown. */
    left: 2.625cqw;
    top: 35.26%;
    width: 3.45cqw;
    height: 3.45cqw;
    margin: -1.725cqw 0 0 -1.725cqw;
    border-radius: 50%;
    background: #00aff0;
}

.ud-hero__cta-text {
    position: absolute;
    left: 6cqw;
    top: 18.32%;
    font-size: 1.27cqw;
    font-weight: 500;
    line-height: 1.24;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Hover and keyboard focus --------------------------------------------
 *
 * The whole dot-and-label group is the link, so the cue is on the dot: it
 * lights up and the arch around it comes forward. The focus outline the
 * browser draws is left alone on purpose — it is the only thing a keyboard
 * user gets.
 */

/* The theme loads the whole of Bootstrap globally, and its a:hover (0,1,1) is
   more specific than .ud-hero__cta (0,1,0) — without this the label turns
   Bootstrap blue on hover and sinks into the blue of the photo. Pinned across
   every state, underline included. */
.ud-hero__cta,
.ud-hero__cta:hover,
.ud-hero__cta:focus,
.ud-hero__cta:active {
    color: inherit;
    text-decoration: none;
}

.ud-hero__dot,
.ud-hero__arch {
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out,
        border-color 0.25s ease-out;
}

.ud-hero__cta:hover .ud-hero__dot,
.ud-hero__cta:focus-visible .ud-hero__dot {
    box-shadow: 0 0 0 0.3cqw rgba(0, 175, 240, 0.35), 0 0 3cqw rgba(0, 175, 240, 0.65);
}

.ud-hero__cta:hover .ud-hero__arch,
.ud-hero__cta:focus-visible .ud-hero__arch {
    border-color: rgba(255, 255, 255, 0.55);
}

/* Underline rather than a colour or a glow: the label sits on a photo whose
   brightness varies, and a rule under it reads on any of it. The floors keep
   it from thinning to nothing on a phone. */
.ud-hero__cta:hover .ud-hero__cta-text,
.ud-hero__cta:focus-visible .ud-hero__cta-text {
    text-decoration: underline;
    text-decoration-thickness: max(1px, 0.09cqw);
    text-underline-offset: max(2px, 0.3cqw);
}

@media (prefers-reduced-motion: no-preference) {

    .ud-hero__cta:hover .ud-hero__dot,
    .ud-hero__cta:focus-visible .ud-hero__dot {
        transform: scale(1.09);
    }
}

/* Entrance ------------------------------------------------------------
 *
 * Runs once on load, in the reading order of the banner: the IFA lockup
 * drives in from the left, the address fades in behind it, the call to
 * action rises from the bottom edge. Guarded as a whole — with reduced motion
 * asked for, none of it is declared and everything is simply in place.
 */

@media (prefers-reduced-motion: no-preference) {

    .ud-hero__lockup {
        animation: ud-hero-drive-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .ud-hero__meet {
        animation: ud-hero-fade-in 0.8s ease-out 0.55s both;
    }

    .ud-hero__cta {
        animation: ud-hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.95s both;
    }
}

@keyframes ud-hero-drive-in {
    from {
        opacity: 0;
        transform: translateX(-140%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

    to {
        opacity: 1;
    }
}

@keyframes ud-hero-rise {
    from {
        opacity: 0;
        transform: translateY(45%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Pulse -------------------------------------------------------------- */

.ud-hero__dot::before,
.ud-hero__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #00aff0;
    animation: ud-hero-pulse 2.8s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
}

/* The first ring waits for the dot to have finished rising; the second is
   half a cycle behind it. */
.ud-hero__dot::before {
    animation-delay: 1.9s;
}

.ud-hero__dot::after {
    animation-delay: 3.3s;
}

@keyframes ud-hero-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    70% {
        opacity: 0;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

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

    .ud-hero__dot::before,
    .ud-hero__dot::after {
        animation: none;
    }

    /* A spark frozen mid-path would just read as a smudge on the artwork. */
    .ud-hero__spark {
        display: none;
    }
}

/* Phones ------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Phones keep the fixed frame from the layout, so here the vertical
       values stay per cent of the height and the anchors from the desktop
       rules are switched back off. */
    .ud-hero {
        height: auto;
        aspect-ratio: 490 / 621;
    }

    /* The phone source is cut wider than the frame on purpose (see the
       comment by udtheme_hero_picture in the template): this is what picks
       the actual window out of it. */
    .ud-hero__media img {
        object-position: 42.5% center;
    }

    /* The phone crop is a different window on the artwork, so the svg's
       coordinates no longer sit on the U — and the U is out of frame here
       anyway. */
    .ud-hero__spark {
        display: none;
    }

    /* The lockup takes the dark band above the stand on its own. Its dates
       sit far closer to the wordmark than the phone layout drew them, so the
       address line cannot share that band any more — it moves down to sit
       over the call to action, the way it does on desktop. */
    .ud-hero__lockup {
        left: 25.5cqw;
        top: 3.4%;
        width: 49cqw;
    }

    /* Everything else scales with the frame, but this line hits the floor of
       legibility first: at 320 pure scaling gives 7.7px. */
    .ud-hero__meet {
        left: 13.41cqw;
        top: 74%;
        bottom: auto;
        font-size: max(10px, 2.4cqw);
        line-height: 1.25;
    }

    .ud-hero__cta {
        left: 13.41cqw;
        top: 82.97%;
        bottom: auto;
        height: 17.03%;
    }

    .ud-hero__arch {
        width: 16.1cqw;
        height: 100%;
        border-width: 0.6cqw;
        border-radius: 8.05cqw 8.05cqw 0 0;
    }

    .ud-hero__dot {
        left: 8.05cqw;
        top: 34.75%;
        width: 10.6cqw;
        height: 10.6cqw;
        margin: -5.3cqw 0 0 -5.3cqw;
    }

    .ud-hero__cta-text {
        left: 18.4cqw;
        top: 14.27%;
        font-size: 3.86cqw;
        line-height: 1.27;
    }
}