/* Mytho Audio — pagina coming soon (layout/layout-comingsoon.phtml) */
:root {
    --ma-black: #0b0a09;
    --ma-ink: #15130f;
    --ma-gold: #c9a45c;
    --ma-gold-light: #e9cd8c;
    --ma-gold-dark: #8a6d35;
    --ma-text: #d9cdb4;
    --ma-serif: "Cormorant Garamond", Georgia, serif;
    --ma-roman: "Cinzel", "Trajan Pro", Georgia, serif;
}

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

html, body { height: 100%; }

body.ma-cs {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ma-text);
    font-family: var(--ma-serif);
    background-color: var(--ma-black);
    /* alone caldo dietro il logo + grana della carta */
    background-image:
        radial-gradient(ellipse 60% 45% at 50% 38%, rgba(201, 164, 92, .13), transparent 70%),
        radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0, 0, 0, .9), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-font-smoothing: antialiased;
}

.ma-cs-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 24px;
}

.ma-cs-hero {
    width: 100%;
    max-width: 640px;
    text-align: center;
}

/* logo */
.ma-cs-logo img {
    display: block;
    width: min(420px, 78vw);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 28px rgba(201, 164, 92, .18));
    animation: ma-rise 1.6s cubic-bezier(.2, .7, .2, 1) both;
}

/* onda sonora: barre sottili d'oro */
.ma-cs-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    margin: 40px auto 30px;
    animation: ma-fade 1.2s .6s both;
}

.ma-cs-wave span {
    display: block;
    width: 2px;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(var(--ma-gold-light), var(--ma-gold-dark));
    transform-origin: center;
    transform: scaleY(.15);
    animation: ma-eq 2.4s ease-in-out infinite;
}

/* profilo a campana con ritardi sfalsati */
.ma-cs-wave span:nth-child(1), .ma-cs-wave span:nth-child(23) { --h: .18; animation-delay: -.2s; }
.ma-cs-wave span:nth-child(2), .ma-cs-wave span:nth-child(22) { --h: .26; animation-delay: -1.1s; }
.ma-cs-wave span:nth-child(3), .ma-cs-wave span:nth-child(21) { --h: .34; animation-delay: -.6s; }
.ma-cs-wave span:nth-child(4), .ma-cs-wave span:nth-child(20) { --h: .42; animation-delay: -1.7s; }
.ma-cs-wave span:nth-child(5), .ma-cs-wave span:nth-child(19) { --h: .5;  animation-delay: -.9s; }
.ma-cs-wave span:nth-child(6), .ma-cs-wave span:nth-child(18) { --h: .58; animation-delay: -1.4s; }
.ma-cs-wave span:nth-child(7), .ma-cs-wave span:nth-child(17) { --h: .66; animation-delay: -.3s; }
.ma-cs-wave span:nth-child(8), .ma-cs-wave span:nth-child(16) { --h: .74; animation-delay: -2s; }
.ma-cs-wave span:nth-child(9), .ma-cs-wave span:nth-child(15) { --h: .82; animation-delay: -.8s; }
.ma-cs-wave span:nth-child(10), .ma-cs-wave span:nth-child(14) { --h: .9; animation-delay: -1.5s; }
.ma-cs-wave span:nth-child(11), .ma-cs-wave span:nth-child(13) { --h: .96; animation-delay: -.5s; }
.ma-cs-wave span:nth-child(12) { --h: 1; animation-delay: -1.2s; }

/* testi */
.ma-cs-kicker {
    margin: 0 0 14px;
    font-family: var(--ma-roman);
    font-size: 13px;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--ma-gold);
    padding-left: .5em; /* compensa il letter-spacing finale */
    animation: ma-fade 1s .9s both;
}

.ma-cs-title {
    margin: 0;
    font-family: var(--ma-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 5.4vw, 44px);
    line-height: 1.15;
    color: #f3e6c7;
    animation: ma-fade 1s 1.1s both;
}

.ma-cs-text {
    max-width: 440px;
    margin: 16px auto 0;
    font-size: clamp(17px, 2.4vw, 20px);
    line-height: 1.55;
    color: var(--ma-text);
    opacity: .82;
    animation: ma-fade 1s 1.3s both;
}

/* filetto come nel logo: linea · punto · linea */
.ma-cs-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 38px auto 0;
    animation: ma-fade 1s 1.5s both;
}

.ma-cs-rule i {
    display: block;
    width: 72px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ma-gold-dark));
}

.ma-cs-rule i:last-child { transform: scaleX(-1); }

.ma-cs-rule b {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ma-gold);
}

.ma-cs-footer {
    padding: 20px 16px 26px;
    text-align: center;
    font-family: var(--ma-roman);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ma-gold-dark);
}

@keyframes ma-eq {
    0%, 100% { transform: scaleY(calc(var(--h, .5) * .35)); }
    50%      { transform: scaleY(var(--h, .5)); }
}

@keyframes ma-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

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

@media (max-width: 480px) {
    .ma-cs-main { padding-top: 32px; }
    .ma-cs-wave { gap: 4px; height: 28px; margin: 30px auto 24px; }
    .ma-cs-kicker { font-size: 11px; letter-spacing: .4em; }
}

@media (prefers-reduced-motion: reduce) {
    .ma-cs-logo img, .ma-cs-wave, .ma-cs-kicker, .ma-cs-title, .ma-cs-text, .ma-cs-rule { animation: none; }
    .ma-cs-wave span { animation: none; transform: scaleY(calc(var(--h, .5) * .7)); }
}

.ma-cs-rule + .ma-cs-title { margin-top: 32px; }

/* testi legali (comingsoon/cookie.phtml) */
.ma-cs-legal {
    width: 100%;
    max-width: 860px;
    font-size: 18px;
    line-height: 1.6;
}

.ma-cs-legal a { color: var(--ma-gold-light); }