/* =====================================================
   HERO v3: living gradient, photo fan, role rotator
   ===================================================== */
@property --g1 { syntax: '<color>'; inherits: false; initial-value: #fff6dc; }
@property --g2 { syntax: '<color>'; inherits: false; initial-value: #fde6ee; }
@property --g3 { syntax: '<color>'; inherits: false; initial-value: #efe8fa; }
.hero { min-height: 100vh; padding: 6.5rem 5% 5rem; --g1: #fff6dc; --g2: #fde6ee; --g3: #efe8fa; background: linear-gradient(125deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);  }
@keyframes heroColors {
    0%, 100% { --g1: #fff4d6; --g2: #fde3ec; --g3: #eee6fa; }
    25% { --g1: #fde6ee; --g2: #efe8fa; --g3: #e4f0d8; }
    50% { --g1: #ece4f8; --g2: #e3f0d6; --g3: #fff2cf; }
    75% { --g1: #e6f1dc; --g2: #fff1cc; --g3: #fde1eb; }
}
.hero::after { background: linear-gradient(to bottom, transparent 82%, var(--cream) 100%) !important; }
.hero-blobs .blob { opacity: 0.75; filter: blur(50px); mix-blend-mode: multiply; animation: blobDrift 18s ease-in-out infinite alternate, blobMorph 12s ease-in-out infinite, blobTint 20s ease-in-out infinite; }
.blob.b1 { background: #fbe29a; } .blob.b2 { background: #f9c3d5; animation-delay: -6s, -3s, -5s; } .blob.b3 { background: #d9cbf3; animation-delay: -12s, -7s, -10s; } .blob.b4 { background: #cfe5bd; animation-delay: -3s, -9s, -15s; }
@keyframes blobMorph { 0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; } 33% { border-radius: 63% 37% 38% 62% / 55% 61% 39% 45%; } 66% { border-radius: 36% 64% 52% 48% / 62% 35% 65% 38%; } }
@keyframes blobTint { 0%, 100% { filter: blur(50px) hue-rotate(0deg); } 50% { filter: blur(56px) hue-rotate(-28deg); } }
.hero-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: conic-gradient(from var(--ga) at var(--gx, 70%) var(--gy, 40%), #f9b8cf, #fbdc84, #c7e3ad, #a9d8ea, #cdb8f2, #f9b8cf); -webkit-mask-image: radial-gradient(380px circle at var(--gx, 70%) var(--gy, 40%), #000 0%, rgba(0,0,0,0.5) 40%, transparent 72%); mask-image: radial-gradient(380px circle at var(--gx, 70%) var(--gy, 40%), #000 0%, rgba(0,0,0,0.5) 40%, transparent 72%); opacity: 0.85; animation: gaSpin 6s linear infinite; }

.hero-inner { gap: 3.25rem; max-width: 1240px; justify-content: center; }
.hero-text { flex: 0 1 480px; position: relative; z-index: 3; }
.hero-label { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem 0.45rem 0.8rem; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(110, 154, 76, 0.22); border-radius: 50px; font-size: 0.68rem; letter-spacing: 0.16em; backdrop-filter: blur(6px); }
.label-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: dotPulse 2s ease-out infinite; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(110, 154, 76, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(110, 154, 76, 0); } }
.hero h1 { font-size: clamp(3.4rem, 7vw, 6.4rem); line-height: 0.92; margin: 1.1rem 0 1.3rem; letter-spacing: -0.025em; }
.hero h1 em { display: inline-block; margin-left: 0.04em; }
.hero-role { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); color: var(--white); margin-bottom: 0.7rem; display: flex; align-items: flex-start; gap: 0.4rem; line-height: 1.3; opacity: 0; animation: fadeUp 0.8s ease forwards 1.1s; }
.rotator { position: relative; display: inline-block; height: 1.3em; line-height: 1.3; font-style: italic; font-weight: 500; transition: width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
.rot-word { position: absolute; left: 0; top: 0; color: var(--c); opacity: 0; transform: translateY(70%) rotateX(-80deg); transform-origin: 50% 100%; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s; white-space: nowrap; }
.rot-word.is-on { opacity: 1; transform: none; }
.rot-word.is-out { opacity: 0; transform: translateY(-70%) rotateX(80deg); }
.rot-word::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.3em; background: var(--c); opacity: 0.16; border-radius: 4px; z-index: -1; }
.hero-intro { font-size: 1.08rem;  max-width: 520px; animation-delay: 1.25s; }
.hero-tags { animation-delay: 1.45s; }


/* Photo fan: cards shuffle on their own, spread on hover, click to bring forward */
.collage { position: relative; flex: 0 0 700px; height: 600px; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeUp 1s ease forwards 0.6s; transition: transform 0.3s ease-out; }
.fan { position: relative; width: 284px; height: 392px; }
.fan-halo { position: absolute; width: 460px; height: 380px; border-radius: 50%; background: conic-gradient(from 0deg, #fbe29a, #f9c3d5, #d9cbf3, #cfe5bd, #fbe29a); filter: blur(40px); opacity: 0.7; animation: spinSlow 18s linear infinite; }
.collage .fan-card { position: absolute; inset: 0; width: 284px; height: 392px; padding: 8px; border-radius: 152px 152px 20px 20px; cursor: pointer; margin: 0 !important; animation: cardFloat 6s ease-in-out infinite; transition: translate 0.9s cubic-bezier(0.34, 1.3, 0.64, 1), rotate 0.9s cubic-bezier(0.34, 1.3, 0.64, 1), scale 0.9s cubic-bezier(0.34, 1.3, 0.64, 1), filter 0.9s ease, box-shadow 0.45s ease; }
.collage .fan-card::after { display: none; }
.collage .fan-card img { border-radius: 144px 144px 13px 13px; object-position: center 30%; }
.collage .fan-card::before { inset: 8px; border-radius: 144px 144px 13px 13px; }
.collage .fan-card[data-slot="0"] { z-index: 3; translate: 0 0; rotate: -2deg; scale: 1; }
.collage .fan-card[data-slot="1"] { z-index: 2; translate: -218px 30px; rotate: -9deg; scale: 0.88; }
.collage .fan-card[data-slot="2"] { z-index: 1; translate: 218px 12px; rotate: 8deg; scale: 0.88; }
.collage:hover .fan-card[data-slot="1"] { translate: -236px 34px; rotate: -11deg; }
.collage:hover .fan-card[data-slot="2"] { translate: 236px 14px; rotate: 10deg; }
.collage .fan-card[data-slot="0"]:hover { scale: 1.12; z-index: 4; }
.collage .fan-card:not([data-slot="0"]):hover { scale: 1.04; z-index: 4; }
.collage .fan-card:nth-child(2) { animation-delay: -2s; } .collage .fan-card:nth-child(3) { animation-delay: -4s; }
@keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fan-dots { position: absolute; bottom: 6px; left: 50%; translate: -50% 0; display: flex; gap: 0.5rem; z-index: 5; }
.fan-dots button { width: 9px; height: 9px; border-radius: 10px; border: none; background: rgba(46, 34, 54, 0.18); cursor: pointer; transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s; padding: 0; }
.fan-dots button.on { width: 28px; background: var(--cyan); }

@media (max-width: 1200px) {
    .hero-inner { flex-direction: column; gap: 2.5rem; }
    .hero-text { text-align: center; flex: none; max-width: 600px; }
    .hero-role, .hero-tags { justify-content: center; }
    .hero-intro { margin-left: auto; margin-right: auto; }
    .collage { flex: none; width: 700px; max-width: 100%; }
}
@media (max-width: 768px) {
    .hero { padding: 5.5rem 1rem 3rem; }
    .hero-label { font-size: 0.56rem; letter-spacing: 0.06em; padding: 0.4rem 0.8rem 0.4rem 0.65rem; white-space: nowrap; }
    .hero h1 { font-size: clamp(2.9rem, 13vw, 3.6rem); }
    .collage { width: 100%; height: 340px; }
    .fan, .collage .fan-card { width: 160px; height: 222px; }
    .collage .fan-card { padding: 5px; border-radius: 88px 88px 14px 14px; }
    .collage .fan-card img, .collage .fan-card::before { border-radius: 83px 83px 9px 9px; inset: 5px; }
    .collage .fan-card[data-slot="1"], .collage:hover .fan-card[data-slot="1"] { translate: -112px 22px; }
    .collage .fan-card[data-slot="2"], .collage:hover .fan-card[data-slot="2"] { translate: 112px 8px; }
    .fan-halo { width: 250px; height: 250px; }
    .fan-dots { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } .rot-word { transition: none; } }