/**
 * Hero Learn - PianoMode
 * Hero section styled exactly like Listen & Play hero
 * Same fonts, colors, floating notes animations
 *
 * @author PianoMode Team
 * @version 5.0.0 - Matching design system with gold accents
 */

/* Montserrat font loaded via functions.php preload for better LCP */

/* ===================================================
   VARIABLES SPÉCIFIQUES HERO LEARN - DESIGN SYSTEM
   =================================================== */

:root {
    /* Couleurs PianoMode - Base: #D7BF81 rgb(215, 191, 129) */
    --pm-gold: #D7BF81;
    --pm-gold-dark: #BEA86E;  /* Darker variant of #D7BF81 */
    --pm-gold-light: #E6D4A8; /* Lighter variant of #D7BF81 */
    --pm-gold-alpha-10: rgba(215, 191, 129, 0.1);
    --pm-gold-alpha-25: rgba(215, 191, 129, 0.25);
    --pm-black: #0a0a0a;
    --pm-black-medium: #1a1a1a;
    --pm-black-light: #2a2a2a;
    --pm-white: #ffffff;
    --pm-gray-light: #fafafa;
    --pm-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Couleurs héro spécifiques */
    --hero-overlay-primary: rgba(26, 26, 26, 0.95);
    --hero-overlay-secondary: rgba(42, 42, 42, 0.9);
    --hero-score-opacity: 0.15;
    --hero-notes-opacity: 0.3;

    /* Animations */
    --hero-float-duration: 20s;
    --hero-note-duration: 15s;
    --hero-shimmer-duration: 3s;
}

/* ===================================================
   HERO PRINCIPAL LEARN - FULL WIDTH
   =================================================== */

.pianomode-hero-learn {
    position: relative;
    /* Header is non-sticky — hero sits below it and fits the remaining viewport */
    min-height: calc(100vh - var(--pm-header-h, 140px));
    min-height: calc(100dvh - var(--pm-header-h, 140px));
    width: 100vw !important;
    max-width: none !important;

    /* FULL WIDTH */
    margin: 0 !important;
    padding: 48px 24px 72px !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pm-black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 1;
}
@media (max-width: 600px) {
    .pianomode-hero-learn {
        min-height: calc(100vh - var(--pm-header-h, 100px)) !important;
        min-height: calc(100dvh - var(--pm-header-h, 100px)) !important;
        padding: 36px 18px 60px !important;
    }
}

/* BARRE DORÉE DE SÉPARATION - Plus épaisse au centre */
.pianomode-hero-learn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--pm-gold-dark) 10%,
        var(--pm-gold) 30%,
        var(--pm-gold-light) 50%,
        var(--pm-gold) 70%,
        var(--pm-gold-dark) 90%,
        transparent 100%);
    box-shadow:
        0 -4px 20px rgba(215, 191, 129, 0.4),
        0 4px 20px rgba(215, 191, 129, 0.3);
    z-index: 100;
}

/* ===================================================
   BACKGROUND AVEC IMAGES DE PARTITIONS
   =================================================== */

.pianomode-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pianomode-score-images {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: var(--hero-score-opacity);
}

.pianomode-score-image {
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--pianomode-radius-md);
    transition: var(--pianomode-transition-smooth);
    filter: sepia(0.3) brightness(0.7) contrast(1.2);
}

/* Positionnement intelligent des images de partitions */
.pianomode-score-image:nth-child(1) {
    width: 280px;
    height: 200px;
    top: 10%;
    left: 5%;
    animation: heroFloat1 20s ease-in-out infinite;
}

.pianomode-score-image:nth-child(2) {
    width: 320px;
    height: 220px;
    top: 20%;
    right: 8%;
    animation: heroFloat2 25s ease-in-out infinite;
}

.pianomode-score-image:nth-child(3) {
    width: 240px;
    height: 180px;
    bottom: 15%;
    left: 8%;
    animation: heroFloat3 22s ease-in-out infinite;
}

.pianomode-score-image:nth-child(4) {
    width: 300px;
    height: 200px;
    bottom: 25%;
    right: 5%;
    animation: heroFloat4 18s ease-in-out infinite;
}

.pianomode-score-image:nth-child(5) {
    width: 200px;
    height: 150px;
    top: 50%;
    left: 2%;
    animation: heroFloat5 24s ease-in-out infinite;
}

.pianomode-score-image:nth-child(6) {
    width: 250px;
    height: 180px;
    top: 40%;
    right: 3%;
    animation: heroFloat6 26s ease-in-out infinite;
}

/* ===================================================
   OVERLAY ET EFFETS
   =================================================== */

.pianomode-hero-learn .pianomode-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, .82) 0%,
        rgba(10, 10, 10, .78) 50%,
        rgba(0, 0, 0, .88) 100%
    );
    z-index: 2;
}

/* Smooth bottom fade to page surface */
.pianomode-hero-learn::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, #0B0B0B);
    z-index: 99;
    pointer-events: none;
}

/* ===================================================
   NOTES MUSICALES FLOTTANTES - ANIMATION DOUCE
   =================================================== */

.pianomode-hero-learn .pianomode-floating-notes {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.pianomode-hero-learn .pianomode-note {
    position: absolute;
    color: var(--pm-gold);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--pm-font);
    font-weight: 400;
    user-select: none;
    will-change: transform, opacity;
    opacity: 0;
    text-shadow:
        0 0 10px rgba(215, 191, 129, 0.6),
        0 0 20px rgba(215, 191, 129, 0.4),
        0 0 30px rgba(215, 191, 129, 0.2);
    filter: drop-shadow(0 0 8px rgba(215, 191, 129, 0.5));
}

.pianomode-hero-learn .pianomode-note:nth-child(1) { top: 0; left: 0; animation: noteFloat1 45s ease-in-out infinite; }
.pianomode-hero-learn .pianomode-note:nth-child(2) { top: 0; left: 0; animation: noteFloat2 52s ease-in-out infinite; animation-delay: 2s; }
.pianomode-hero-learn .pianomode-note:nth-child(3) { top: 0; left: 0; animation: noteFloat3 48s ease-in-out infinite; animation-delay: 5s; }
.pianomode-hero-learn .pianomode-note:nth-child(4) { top: 0; left: 0; animation: noteFloat4 55s ease-in-out infinite; animation-delay: 1s; }
.pianomode-hero-learn .pianomode-note:nth-child(5) { top: 0; left: 0; animation: noteFloat5 50s ease-in-out infinite; animation-delay: 3.5s; }
.pianomode-hero-learn .pianomode-note:nth-child(6) { top: 0; left: 0; animation: noteFloat6 58s ease-in-out infinite; animation-delay: 7s; }
.pianomode-hero-learn .pianomode-note:nth-child(7) { top: 0; left: 0; animation: noteFloat7 46s ease-in-out infinite; animation-delay: 4s; }
.pianomode-hero-learn .pianomode-note:nth-child(8) { top: 0; left: 0; animation: noteFloat8 53s ease-in-out infinite; animation-delay: 6s; }
.pianomode-hero-learn .pianomode-note:nth-child(9) { top: 0; left: 0; animation: noteFloat9 49s ease-in-out infinite; animation-delay: 8s; }
.pianomode-hero-learn .pianomode-note:nth-child(10) { top: 0; left: 0; animation: noteFloat10 56s ease-in-out infinite; animation-delay: 10s; }

/* Animations - slow, fluid, gentle floating */
@keyframes noteFloat1 {
    0% { transform: translate(10vw, 20vh); opacity: 0; }
    5% { opacity: 0.35; }
    25% { transform: translate(25vw, 45vh); opacity: 0.3; }
    50% { transform: translate(55vw, 35vh); opacity: 0.25; }
    75% { transform: translate(30vw, 55vh); opacity: 0.3; }
    95% { opacity: 0.08; }
    100% { transform: translate(10vw, 20vh); opacity: 0; }
}
@keyframes noteFloat2 {
    0% { transform: translate(75vw, 25vh); opacity: 0; }
    5% { opacity: 0.3; }
    30% { transform: translate(55vw, 50vh); opacity: 0.25; }
    60% { transform: translate(30vw, 35vh); opacity: 0.3; }
    90% { transform: translate(60vw, 45vh); opacity: 0.15; }
    100% { transform: translate(75vw, 25vh); opacity: 0; }
}
@keyframes noteFloat3 {
    0% { transform: translate(50vw, 70vh); opacity: 0; }
    5% { opacity: 0.3; }
    35% { transform: translate(25vw, 40vh); opacity: 0.25; }
    65% { transform: translate(45vw, 25vh); opacity: 0.3; }
    90% { transform: translate(55vw, 55vh); opacity: 0.15; }
    100% { transform: translate(50vw, 70vh); opacity: 0; }
}
@keyframes noteFloat4 {
    0% { transform: translate(20vw, 60vh); opacity: 0; }
    5% { opacity: 0.35; }
    30% { transform: translate(45vw, 35vh); opacity: 0.25; }
    55% { transform: translate(70vw, 50vh); opacity: 0.3; }
    80% { transform: translate(40vw, 45vh); opacity: 0.2; }
    100% { transform: translate(20vw, 60vh); opacity: 0; }
}
@keyframes noteFloat5 {
    0% { transform: translate(85vw, 15vh); opacity: 0; }
    5% { opacity: 0.3; }
    30% { transform: translate(65vw, 45vh); opacity: 0.25; }
    60% { transform: translate(35vw, 30vh); opacity: 0.3; }
    85% { transform: translate(55vw, 55vh); opacity: 0.15; }
    100% { transform: translate(85vw, 15vh); opacity: 0; }
}
@keyframes noteFloat6 {
    0% { transform: translate(5vw, 45vh); opacity: 0; }
    5% { opacity: 0.3; }
    35% { transform: translate(25vw, 25vh); opacity: 0.25; }
    65% { transform: translate(60vw, 40vh); opacity: 0.3; }
    90% { transform: translate(35vw, 60vh); opacity: 0.15; }
    100% { transform: translate(5vw, 45vh); opacity: 0; }
}
@keyframes noteFloat7 {
    0% { transform: translate(40vw, 15vh); opacity: 0; }
    5% { opacity: 0.3; }
    30% { transform: translate(15vw, 45vh); opacity: 0.25; }
    60% { transform: translate(50vw, 60vh); opacity: 0.3; }
    85% { transform: translate(70vw, 30vh); opacity: 0.15; }
    100% { transform: translate(40vw, 15vh); opacity: 0; }
}
@keyframes noteFloat8 {
    0% { transform: translate(65vw, 65vh); opacity: 0; }
    5% { opacity: 0.25; }
    35% { transform: translate(80vw, 35vh); opacity: 0.3; }
    65% { transform: translate(45vw, 50vh); opacity: 0.2; }
    90% { transform: translate(60vw, 40vh); opacity: 0.1; }
    100% { transform: translate(65vw, 65vh); opacity: 0; }
}
@keyframes noteFloat9 {
    0% { transform: translate(30vw, 35vh); opacity: 0; }
    5% { opacity: 0.3; }
    30% { transform: translate(55vw, 20vh); opacity: 0.25; }
    60% { transform: translate(75vw, 55vh); opacity: 0.3; }
    85% { transform: translate(20vw, 50vh); opacity: 0.15; }
    100% { transform: translate(30vw, 35vh); opacity: 0; }
}
@keyframes noteFloat10 {
    0% { transform: translate(90vw, 50vh); opacity: 0; }
    5% { opacity: 0.25; }
    35% { transform: translate(70vw, 25vh); opacity: 0.3; }
    65% { transform: translate(40vw, 45vh); opacity: 0.2; }
    90% { transform: translate(15vw, 35vh); opacity: 0.1; }
    100% { transform: translate(90vw, 50vh); opacity: 0; }
}

/* ===================================================
   CONTENU PRINCIPAL DU HERO
   =================================================== */

.pianomode-hero-learn .pianomode-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 720px;
    color: var(--pm-white);
}

/* ===================================================
   ÉLÉMENTS AVEC ANIMATIONS D'APPARITION
   =================================================== */

/* Badge - Premier à apparaître */
.pianomode-hero-learn .pianomode-hero-badge {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    background: linear-gradient(135deg,
        rgba(215, 191, 129, 0.25) 0%,
        rgba(215, 191, 129, 0.1) 100%) !important;
    border: 2px solid #D7BF81 !important;
    border-radius: 50px;
    color: #D7BF81 !important;
    font-family: var(--pm-font);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0 !important;
    margin-bottom: 22px;
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 20px rgba(215, 191, 129, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: heroGlow var(--hero-shimmer-duration) ease-in-out infinite alternate,
               heroFadeInUp 1s ease-out 0.2s both;
}

/* Titre principal */
.pianomode-hero-learn .pianomode-hero-title {
    font-family: var(--pm-font);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 800;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* Première partie du titre */
.pianomode-hero-learn .pianomode-hero-title-main {
    color: var(--pm-white);
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--pm-font);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: heroFadeInUp 1s ease-out 0.3s both;
}

/* Seconde partie du titre - Accent doré */
.pianomode-hero-learn .pianomode-hero-title-accent {
    background: linear-gradient(135deg,
        var(--pm-gold-light) 0%,
        var(--pm-gold) 30%,
        var(--pm-gold-dark) 60%,
        var(--pm-gold) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    font-family: var(--pm-font);
    filter: drop-shadow(0 4px 12px rgba(215, 191, 129, 0.5));
    animation: heroShimmer var(--hero-shimmer-duration) ease-in-out infinite,
               heroTitlePulse 4s ease-in-out infinite,
               heroFadeInUp 1s ease-out 0.4s both;
}

/* Sous-titre */
.pianomode-hero-learn .pianomode-hero-subtitle {
    font-family: var(--pm-font);
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 3rem;
    line-height: 1.7;
    font-weight: 400;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: heroFadeInUp 1s ease-out 0.7s both;
}

/* ===================================================
   BOUTONS CTA HERO - 3 BOUTONS
   =================================================== */

.pianomode-hero-learn .pianomode-hero-buttons {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    animation: heroFadeInUp 1s ease-out 0.85s both;
}

.pianomode-hero-learn .pianomode-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-radius: 50px;
    font-family: var(--pianomode-font-family);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.pianomode-hero-learn .pianomode-hero-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: left 0.6s ease;
}

.pianomode-hero-learn .pianomode-hero-btn:hover::before {
    left: 100%;
}

/* Primary Button - Start Learning */
.pianomode-hero-learn .pianomode-hero-btn-primary {
    background: linear-gradient(135deg,
        var(--pm-gold-light) 0%,
        var(--pm-gold) 50%,
        var(--pm-gold-dark) 100%);
    color: var(--pm-black);
    font-family: var(--pm-font);
    font-weight: 700;
    box-shadow:
        0 6px 24px rgba(215, 191, 129, 0.4),
        0 0 0 2px rgba(215, 191, 129, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.pianomode-hero-learn .pianomode-hero-btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
        0 12px 40px rgba(215, 191, 129, 0.6),
        0 0 0 2px rgba(215, 191, 129, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    color: var(--pm-black);
    text-decoration: none;
    filter: brightness(1.1);
}

.pianomode-hero-learn .pianomode-hero-btn-primary:active {
    transform: translateY(-2px) scale(0.98);
}

/* Secondary Button - Resources */
.pianomode-hero-learn .pianomode-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--pm-white);
    font-family: var(--pm-font);
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.pianomode-hero-learn .pianomode-hero-btn-secondary:hover {
    transform: translateY(-4px) scale(1.03);
    background: rgba(215, 191, 129, 0.15);
    border-color: var(--pm-gold);
    box-shadow:
        0 12px 40px rgba(215, 191, 129, 0.3),
        0 0 0 2px rgba(215, 191, 129, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: var(--pm-white);
    text-decoration: none;
}

.pianomode-hero-learn .pianomode-hero-btn-secondary:active {
    transform: translateY(-2px) scale(0.98);
}

/* Tertiary Button - My Progress */
.pianomode-hero-learn .pianomode-hero-btn-tertiary {
    background: rgba(215, 191, 129, 0.12);
    color: var(--pm-gold);
    font-family: var(--pm-font);
    font-weight: 600;
    border: 2px solid rgba(215, 191, 129, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 6px 24px rgba(215, 191, 129, 0.15),
        inset 0 1px 0 rgba(215, 191, 129, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.pianomode-hero-learn .pianomode-hero-btn-tertiary:hover {
    transform: translateY(-4px) scale(1.03);
    background: rgba(215, 191, 129, 0.2);
    border-color: var(--pm-gold);
    box-shadow:
        0 12px 40px rgba(215, 191, 129, 0.35),
        0 0 0 2px rgba(215, 191, 129, 0.5),
        inset 0 1px 0 rgba(215, 191, 129, 0.25);
    color: var(--pm-gold-light);
    text-decoration: none;
}

.pianomode-hero-learn .pianomode-hero-btn-tertiary:active {
    transform: translateY(-2px) scale(0.98);
}

/* Button Icons */
.pianomode-hero-learn .pianomode-hero-btn .btn-icon-left,
.pianomode-hero-learn .pianomode-hero-btn .btn-icon-right {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.pianomode-hero-learn .pianomode-hero-btn .btn-icon-left svg,
.pianomode-hero-learn .pianomode-hero-btn .btn-icon-right svg {
    display: block;
}

.pianomode-hero-learn .pianomode-hero-btn:hover .btn-icon-right {
    transform: translateX(3px);
}

.pianomode-hero-learn .pianomode-hero-btn-primary .btn-icon-left svg,
.pianomode-hero-learn .pianomode-hero-btn-primary .btn-icon-right svg {
    stroke: #1a1a1a;
}

.pianomode-hero-learn .pianomode-hero-btn-secondary .btn-icon-left svg,
.pianomode-hero-learn .pianomode-hero-btn-secondary .btn-icon-right svg {
    stroke: #ffffff;
}

.pianomode-hero-learn .pianomode-hero-btn-tertiary .btn-icon-left svg,
.pianomode-hero-learn .pianomode-hero-btn-tertiary .btn-icon-right svg {
    stroke: var(--pianomode-primary-gold);
}

/* Focus states for accessibility */
.pianomode-hero-learn .pianomode-hero-btn:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(215, 191, 129, 0.5),
        0 4px 20px rgba(215, 191, 129, 0.35);
}

.pianomode-hero-learn .pianomode-hero-btn:focus-visible {
    outline: 2px solid var(--pianomode-primary-gold);
    outline-offset: 3px;
}

/* ===================================================
   ANIMATIONS
   =================================================== */

/* Animation d'apparition progressive */
@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFloat1 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: var(--hero-score-opacity);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
        opacity: calc(var(--hero-score-opacity) * 1.5);
    }
}

@keyframes heroFloat2 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: var(--hero-score-opacity);
    }
    50% {
        transform: translateY(-30px) rotate(-2deg);
        opacity: calc(var(--hero-score-opacity) * 1.5);
    }
}

@keyframes heroFloat3 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: var(--hero-score-opacity);
    }
    50% {
        transform: translateY(-25px) rotate(1deg);
        opacity: calc(var(--hero-score-opacity) * 1.5);
    }
}

@keyframes heroFloat4 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: var(--hero-score-opacity);
    }
    50% {
        transform: translateY(-35px) rotate(-1deg);
        opacity: calc(var(--hero-score-opacity) * 1.5);
    }
}

@keyframes heroFloat5 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: var(--hero-score-opacity);
    }
    50% {
        transform: translateY(-15px) rotate(3deg);
        opacity: calc(var(--hero-score-opacity) * 1.5);
    }
}

@keyframes heroFloat6 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: var(--hero-score-opacity);
    }
    50% {
        transform: translateY(-28px) rotate(-2deg);
        opacity: calc(var(--hero-score-opacity) * 1.5);
    }
}

@keyframes heroGlow {
    0% {
        box-shadow: 0 0 5px rgba(215, 191, 129, 0.3);
    }
    100% {
        box-shadow: 0 0 20px rgba(215, 191, 129, 0.6);
    }
}

@keyframes heroShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes heroTitlePulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(215, 191, 129, 0.3));
    }
    50% {
        transform: scale(1.02);
        filter: drop-shadow(0 0 20px rgba(215, 191, 129, 0.6));
    }
}

/* ===================================================
   RESPONSIVE DESIGN
   =================================================== */

@media (max-width: 1024px) {
    .pianomode-hero-learn {
        min-height: 80vh !important;
        padding: 100px 0 0 0 !important;
    }

    .pianomode-score-image {
        opacity: calc(var(--hero-score-opacity) * 0.8);
    }

    .pianomode-hero-learn .pianomode-hero-content {
        padding-top: 50px;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    .pianomode-hero-learn {
        min-height: 70vh;
        padding: 100px 0 0 0 !important;
    }

    .pianomode-hero-learn .pianomode-hero-content {
        padding: 80px var(--pianomode-spacing-md) 0;
    }

    .pianomode-hero-learn .pianomode-hero-badge {
        font-size: 0.7rem;
        padding: 0.5rem 1rem;
        margin-bottom: 1.2rem;
        margin-top: 60px !important;
    }

    .pianomode-hero-learn .pianomode-hero-title {
        font-size: clamp(2rem, 6vw, 3.5rem);
        margin-bottom: 0.8rem;
    }

    .pianomode-hero-learn .pianomode-hero-subtitle {
        font-size: clamp(0.8rem, 1.8vw, 1rem);
        margin-bottom: 1.5rem;
        max-width: 90%;
    }

    /* Hero Buttons - Tablet */
    .pianomode-hero-learn .pianomode-hero-buttons {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .pianomode-hero-learn .pianomode-hero-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
        gap: 0.6rem;
    }

    .pianomode-hero-learn .pianomode-hero-btn .btn-icon-left svg,
    .pianomode-hero-learn .pianomode-hero-btn .btn-icon-right svg {
        width: 18px;
        height: 18px;
    }

    .pianomode-hero-learn .pianomode-hero-btn .btn-icon-right svg {
        width: 14px;
        height: 14px;
    }

    .pianomode-score-image {
        opacity: calc(var(--hero-score-opacity) * 0.6);
    }

    .pianomode-hero-learn .pianomode-note {
        font-size: 1rem;
    }

    .pianomode-score-image:nth-child(1),
    .pianomode-score-image:nth-child(5) {
        left: -5%;
    }

    .pianomode-score-image:nth-child(2),
    .pianomode-score-image:nth-child(6) {
        right: -5%;
    }
}

@media (max-width: 480px) {
    .pianomode-hero-learn {
        min-height: 60vh;
        padding: 100px 0 0 0 !important;
    }

    .pianomode-hero-learn .pianomode-hero-content {
        padding: 60px var(--pianomode-spacing-sm) 0;
    }

    .pianomode-hero-learn .pianomode-hero-badge {
        font-size: 0.65rem;
        padding: 0.4rem 0.8rem;
        margin-bottom: 1rem;
        margin-top: 40px !important;
    }

    .pianomode-hero-learn .pianomode-hero-title {
        margin-bottom: 0.6rem;
    }

    .pianomode-hero-learn .pianomode-hero-subtitle {
        margin-bottom: 1.2rem;
        line-height: 1.4;
    }

    /* Hero Buttons - Mobile */
    .pianomode-hero-learn .pianomode-hero-buttons {
        flex-direction: column;
        gap: 0.875rem;
        margin-bottom: 1.5rem;
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    .pianomode-hero-learn .pianomode-hero-btn {
        width: 100%;
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
        gap: 0.5rem;
        justify-content: center;
    }

    .pianomode-hero-learn .pianomode-hero-btn .btn-icon-left svg {
        width: 16px;
        height: 16px;
    }

    .pianomode-hero-learn .pianomode-hero-btn .btn-icon-right svg {
        width: 12px;
        height: 12px;
    }
}

/* ===================================================
   INTÉGRATION BLOCKSY - FULL WIDTH FORCÉ
   =================================================== */

.page-template-page-learn .site-main,
.page-id-learn .site-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

.page-template-page-learn .content-area,
.page-id-learn .content-area {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

.page-template-page-learn .entry-content,
.page-id-learn .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.pianomode-hero-learn {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;

    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;

    box-sizing: border-box !important;
    z-index: 1 !important;
}

.ct-container,
.ct-container-fluid,
.container,
.container-fluid,
.wp-block-group,
.entry-content > *:first-child {
    max-width: none !important;
}

body.page-template-page-learn,
body.page-id-learn {
    overflow-x: hidden;
}

body.page-template-page-learn .ct-container,
body.page-id-learn .ct-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}

.pianomode-hero-learn + * {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ===================================================
   DARK MODE SUPPORT
   =================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --hero-overlay-primary: rgba(15, 15, 15, 0.95);
        --hero-overlay-secondary: rgba(25, 25, 25, 0.9);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   2026 EDITORIAL OVERRIDES — pm-lp-hero--learn-2026
   ----------------------------------------------------------------------------
   Layered on top of the base pm-lp-hero shell defined in
   Listen & Play page/listen-play.css. Adds:
     • Fraunces italic accent on the title
     • Eyebrow chip with icon
     • Stats strip pinned to the bottom of the hero
     • Refined button hierarchy (gold / outline-gold / ghost)
   ════════════════════════════════════════════════════════════════════════════ */
.pm-lp-hero.pm-lp-hero--learn-2026 {
    min-height: clamp(520px, 86vh, 820px);
    padding-bottom: clamp(96px, 12vw, 140px);
    /* Glue the hero to the site header. */
    margin-top: 0 !important;
}
/* Site main / Blocksy content wrapper resets for the Learn template
   so the hero butts directly against the header on every breakpoint.
   Blocksy ships a default --theme-content-vertical-spacing of 50-60px;
   we kill it for this template so the hero starts straight under the
   navbar. The selectors cover every wrapper Blocksy may inject (Pro
   adds the .ct-container variant on some layouts). */
body.page-template-Learnpage #main,
body.page-template-learn-page #main,
body.page-template-Learnpage .site-main,
body.page-template-learn-page .site-main,
body.page-template-Learnpage .ct-main-content,
body.page-template-learn-page .ct-main-content,
body.page-template-Learnpage > main > .ct-container,
body.page-template-learn-page > main > .ct-container,
body.page-template-Learnpage [class*="entry-content"],
body.page-template-learn-page [class*="entry-content"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
    --theme-content-vertical-spacing: 0 !important;
}
/* And on the body itself: Blocksy applies a top padding via
   --theme-content-vertical-spacing too. Zero it out for this
   template only so the hero starts at y=header_height. */
body.page-template-Learnpage,
body.page-template-learn-page {
    --theme-content-vertical-spacing: 0 !important;
}
/* Kill the inherited bottom fade-to-paper gradient: the redesigned hero
   must butt directly against the cinematic piano section beneath, no
   cream / white transition strip. */
.pm-lp-hero.pm-lp-hero--learn-2026::after {
    content: none !important;
    display: none !important;
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__overlay {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(10, 9, 8, 0.45) 0%, rgba(10, 9, 8, 0.78) 60%, rgba(10, 9, 8, 0.95) 100%),
        linear-gradient(180deg, rgba(10, 9, 8, 0.55) 0%, transparent 30%, transparent 60%, rgba(10, 9, 8, 0.92) 100%);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(215, 191, 129, 0.12);
    border: 1px solid rgba(215, 191, 129, 0.32);
    border-radius: 999px;
    color: #D7BF81;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__title {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    font-weight: 300;
    font-size: clamp(40px, 7.5vw, 104px);
    line-height: 1.06;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 144;
    color: #F5EFE3;
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    margin-bottom: clamp(20px, 3vw, 36px);
    /* Allow italic descenders + side-bearings to render past the box. */
    overflow: visible;
    padding-bottom: 0.12em;
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__title-main {
    display: block; font-style: normal;
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__title-accent {
    display: inline-block; font-style: italic; font-weight: 300;
    /* Generous side / bottom padding so italic glyphs (and the
       background-clip mask) never clip "y" / "way" descenders. */
    padding: 0.04em 0.16em 0.14em 0.04em;
    margin-right: -0.08em;
    background: linear-gradient(135deg, #E8CF92 10%, #D7BF81 55%, #B8932F 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.015em;
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__subtitle {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    font-weight: 300;
    font-size: clamp(15px, 2vw, 20px);
    line-height: 1.55;
    color: rgba(245, 239, 227, 0.82);
    max-width: 600px;
    margin: 0 auto clamp(24px, 4vw, 40px);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__subtitle em {
    font-style: italic; color: #D7BF81;
}

/* Editorial button system — gold filled, ghost outlined */
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    border: 1px solid transparent;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, background .25s, color .25s, border-color .25s;
    cursor: pointer; text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__btn--primary {
    background: #D7BF81; color: #0A0908;
    box-shadow: 0 8px 28px rgba(215, 191, 129, 0.32);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__btn--primary:hover {
    background: #E8CF92;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(215, 191, 129, 0.50);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__btn--secondary {
    background: rgba(245, 239, 227, 0.06);
    color: #F5EFE3;
    border-color: rgba(245, 239, 227, 0.25);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__btn--secondary:hover {
    background: rgba(245, 239, 227, 0.12);
    border-color: #D7BF81;
    color: #D7BF81;
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__btn--ghost {
    background: transparent;
    color: rgba(245, 239, 227, 0.72);
    border-color: rgba(245, 239, 227, 0.18);
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__btn--ghost:hover {
    color: #D7BF81; border-color: rgba(215, 191, 129, 0.5);
    background: rgba(215, 191, 129, 0.08);
}

/* Stats strip. Sits flush at the bottom of the hero. No background, no
   border. The hero overlay's own dark gradient already provides contrast
   so the figures sit cleanly on top of it without looking like a
   separate banded container. */
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__stats {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 4;
    padding: clamp(16px, 2vw, 22px) clamp(20px, 4vw, 56px);
    display: flex; justify-content: center; align-items: baseline;
    gap: clamp(20px, 4vw, 64px);
    flex-wrap: wrap;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__stat {
    display: inline-flex; align-items: baseline; gap: 10px;
    color: rgba(245, 239, 227, 0.55);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__stat strong {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    font-style: italic; font-weight: 400;
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: 0;
    color: #D7BF81;
    line-height: 1;
    font-variation-settings: "opsz" 96;
}

/* Mobile — stack the stats compactly */
@media (max-width: 720px) {
    .pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__stats {
        gap: 16px;
        padding: 12px 16px 14px;
    }
    .pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__stat {
        font-size: 9.5px; letter-spacing: 0.14em; gap: 6px;
    }
    .pm-lp-hero.pm-lp-hero--learn-2026 .pm-lp-hero__stat strong { font-size: 18px; }
    .pm-lp-hero.pm-lp-hero--learn-2026 { padding-bottom: clamp(80px, 18vw, 120px); }
}

/* ===================================================
   PRINT STYLES
   =================================================== */

@media print {
    .pianomode-hero-learn {
        display: none;
    }
}