/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Page base */
html, body {
    height: 100%;
    background: radial-gradient(circle at 50%50%, #1c1c1c 20%, #000 100%);
}

/* Centre container */
.landing {
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logo */
.logo {
    width: 80vw;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Wrapper anchors trademark */
.logo-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0; 
}

/* Trademark symbol */
.trademark {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    font-size: clamp(18px, 3vw, 42px);
    color: #ffffff;
    font-family: Arial, sans-serif;
    line-height: 1;
    pointer-events: none;
}

/* Stack logo + text vertically */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 4vh, 0px);
}

:root {
    --coming-size: clamp(14px, 4vw, 20px);
    --coming-line: calc(var(--coming-size) * 1.6);
}

/* ================================
   COMING SOON ROTATING TEXT
================================ */

.coming-block {
    margin-top: 1px;
    display: flex;
    justify-content: center;
}

/* viewport (exactly one line tall) */
.coming-viewport {
    height: var(--coming-line);
    overflow: hidden;
}

/* vertical stack */
.coming-track {
    display: flex;
    flex-direction: column;
    animation: scrollUp 12s ease-in-out infinite;
}

/* each line */
.coming-track p {
    height: var(--coming-line);
    line-height: var(--coming-line);
    margin: 0;

    text-align: center;
    font-family: Arial, sans-serif;
    color: #ffffff;
    letter-spacing: 0.25em;
    font-size: var(--coming-size);
    white-space: nowrap;
}


/* ================================
   BARREL ANIMATION
================================ */

@keyframes scrollUp {
    0%, 20%   { transform: translateY(0); }
    25%, 45%  { transform: translateY(calc(-1 * var(--coming-line))); }
    50%, 70%  { transform: translateY(calc(-2 * var(--coming-line))); }
    75%, 100% { transform: translateY(calc(-3 * var(--coming-line))); }
}