/* Sunolárium – alapok, fejléc, nyitó rész, bemutatkozás, lábléc */
:root{
  --cream:#F3ECE0; --paper:#FBF6EC; --sand:#D9C4A3; --terra:#C4633F; --ink:#2B211A; --muted:#6B5646;
  --gutter:clamp(24px,5vw,120px);
  --serif:'Fraunces',Georgia,serif; --sans:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background-color:var(--cream);
  background-image:linear-gradient(rgba(243,236,224,.6),rgba(243,236,224,.6)),url(img/paper-texture.jpg);
  background-size:auto,cover;background-attachment:fixed}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
.rule{width:clamp(80px,7vw,140px);height:3px;background:var(--terra)}

/* Fejléc */
.site-header{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(16px,2vw,36px) var(--gutter) 0}
.logo{position:relative;display:block;width:clamp(124px,9.5vw,184px);aspect-ratio:1;border-radius:50%;margin:8px 0 0 8px}
.logo::before{content:"";position:absolute;inset:-8px;border-radius:50%;z-index:0;
  background:conic-gradient(#C4633F,#E0956F,#E9B44C,#F4D5A4,#E9B44C,#B5532F,#8A4A2E,#C4633F);
  box-shadow:0 0 26px 4px rgba(224,149,111,.55);animation:logoSpin 7s linear infinite,logoGlow 3.6s ease-in-out infinite}
.logo::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.6),rgba(255,255,255,0) 46%);
  box-shadow:inset 0 -8px 14px rgba(43,33,26,.22),inset 0 6px 10px rgba(255,255,255,.55)}
@keyframes logoSpin{to{transform:rotate(360deg)}}
@keyframes logoGlow{0%,100%{box-shadow:0 0 22px 2px rgba(224,149,111,.40)}50%{box-shadow:0 0 46px 10px rgba(244,176,112,.85)}}
@media (prefers-reduced-motion:reduce){.logo::before{animation:none}}
.logo img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 12px 26px rgba(43,33,26,.4),0 3px 8px rgba(43,33,26,.3)}
.lang{display:flex;gap:4px;padding:6px;background:var(--paper);border:1px solid var(--sand);border-radius:999px;margin-top:clamp(8px,1.1vw,22px)}
.lang button{border:0;border-radius:999px;padding:9px 20px;font-size:15px;font-weight:600;letter-spacing:.1em;background:transparent;color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--terra);color:var(--paper)}

/* Nyitó rész */
.hero{position:relative;min-height:max(640px,100vh);display:flex;align-items:flex-end;padding:0 var(--gutter) clamp(72px,9vw,170px);
  background-image:linear-gradient(90deg,rgba(243,236,224,.9) 0%,rgba(243,236,224,.55) 34%,rgba(243,236,224,0) 62%),url(img/hero.jpg);
  background-size:cover;background-position:center}
.hero-text{display:flex;flex-direction:column;gap:clamp(16px,1.4vw,26px)}
.hero h1{font-size:clamp(68px,10.4vw,220px);line-height:.95;letter-spacing:-.035em}
.author{margin:0;font-size:clamp(14px,.9vw,18px);font-weight:600;letter-spacing:.36em;text-transform:uppercase}
.motto{margin:0;max-width:30ch;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,1.7vw,34px);line-height:1.35}

/* Dalok – szekció (a kártyák a 3. lépésben jönnek) */
.songs{padding:clamp(72px,6vw,120px) var(--gutter) clamp(72px,6vw,120px)}
.songs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,3vw,56px)}
.songs-head h2{font-size:clamp(40px,3.4vw,68px);letter-spacing:-.02em}
.songs-sub{margin:0;padding-bottom:12px;font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.song-msg{text-align:center;color:var(--muted);margin:32px 0 0}
.more-wrap{display:flex;justify-content:center;padding-top:clamp(40px,4vw,70px)}
.more{display:flex;align-items:center;gap:14px;padding:16px 36px;border:1.5px solid var(--terra);background:transparent;color:var(--ink);border-radius:999px;font-size:18px;font-weight:600;letter-spacing:.04em}
.more svg{color:var(--terra);transition:transform .6s ease}
.more:hover svg{transform:rotate(180deg)}

/* Bemutatkozás */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:center;padding:clamp(56px,6vw,120px) var(--gutter)}
.about-photo{grid-column:2 / span 4;margin:0;padding:14px;background:var(--paper);aspect-ratio:4/5;max-width:520px;width:100%;transform:rotate(-1.6deg);box-shadow:0 18px 40px rgba(43,33,26,.18),0 2px 6px rgba(43,33,26,.12)}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover}
.about-text{grid-column:7 / span 5;display:flex;flex-direction:column;gap:28px}
.kicker{margin:0;font-size:14px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.about-text h2{font-weight:300;font-size:clamp(40px,4vw,80px);line-height:1.05;letter-spacing:-.025em}
.about-text p:last-child{margin:0;max-width:34em;font-size:clamp(17px,1.1vw,22px);line-height:1.7}

/* Lábléc */
.site-footer{margin:clamp(40px,5vw,100px) var(--gutter) 0;padding:28px 0 40px;border-top:1px solid var(--sand);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px;color:var(--muted)}

/* Dalkártyák */
.song-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px 24px}
.card{position:relative;width:272px;flex:0 0 auto;padding:16px 16px 10px;border-radius:6px;background:var(--paper);overflow:hidden;
  box-shadow:0 12px 26px rgba(43,33,26,.12),0 1px 4px rgba(43,33,26,.10);transition:background .8s ease,box-shadow .8s ease,opacity .6s ease,transform .6s ease}
.card:nth-child(1){margin-top:0;transform:rotate(-1deg)}
.card:nth-child(2){margin-top:56px;transform:rotate(.8deg)}
.card:nth-child(3){margin-top:16px;transform:rotate(-.6deg)}
.card:nth-child(4){margin-top:72px;transform:rotate(1deg)}
.card:nth-child(5){margin-top:32px;transform:rotate(-.8deg)}
.card.is-enter{opacity:0;transform:translateY(14px)}
.cover{width:240px;height:240px;max-width:100%;background:var(--sand);border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(43,33,26,.06);transition:box-shadow .8s ease}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.meta{display:flex;flex-direction:column;gap:6px;padding:18px 4px 0}
.title{font-size:26px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.album{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time{flex:0 0 auto;font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:13px}
.controls{display:flex;align-items:center;gap:12px;padding:18px 4px 4px}
.play{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;padding:0;background:var(--terra);color:var(--paper);display:flex;align-items:center;justify-content:center}
.play .i-pause{display:none}
.card.is-playing .play .i-play{display:none}
.card.is-playing .play .i-pause{display:block}
.seek{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;height:4px;margin:10px 0;border-radius:2px;cursor:pointer;
  background:linear-gradient(90deg,#B98A5E var(--pos,0%),var(--sand) var(--pos,0%))}
.card.is-playing .seek{background:linear-gradient(90deg,var(--terra) var(--pos,0%),var(--sand) var(--pos,0%))}
.seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--terra);border:2px solid var(--paper);box-shadow:0 1px 3px rgba(43,33,26,.3)}
.seek::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--terra);border:2px solid var(--paper)}
.fav{flex:0 0 auto;width:44px;height:44px;border:0;padding:0;background:transparent;display:flex;align-items:center;justify-content:center}
.fav svg{fill:none;stroke:var(--ink);transition:transform .25s ease}
.fav[aria-pressed="true"] svg{fill:var(--terra);stroke:var(--terra);transform:scale(1.12)}

/* Lejátszott dal: melegebb tónus, mozgó levélárnyék, lágy fény */
.card.is-playing{background:#EBD6B2;box-shadow:0 22px 44px rgba(196,99,63,.30),0 2px 6px rgba(43,33,26,.14)}
.card.is-playing .cover{box-shadow:0 0 34px rgba(224,149,111,.6)}
.card::after{content:"";position:absolute;inset:-10px;pointer-events:none;mix-blend-mode:multiply;filter:blur(7px);opacity:0;transition:opacity .8s ease;
  background:radial-gradient(ellipse 70px 26px at 22% 18%,rgba(43,33,26,.16),transparent 70%),radial-gradient(ellipse 60px 22px at 70% 34%,rgba(43,33,26,.13),transparent 70%),radial-gradient(ellipse 80px 28px at 40% 62%,rgba(43,33,26,.12),transparent 70%)}
.card.is-playing::after{opacity:1;animation:drift 10s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,6px)}}

/* Kisebb képernyő */
@media (max-width:1500px){.song-row{justify-content:center}.card{margin-top:0!important}}
@media (max-width:900px){.about{grid-template-columns:1fr;row-gap:48px}.about-photo,.about-text{grid-column:1}.about-photo{max-width:420px}}
@media (prefers-reduced-motion:reduce){.card.is-playing::after{animation:none}.more svg{transition:none}html{scroll-behavior:auto}}

/* Lapozós görgetés: minden szakasz egy teljes képernyő, és mindig teljesen látszik.
   Csak elég nagy ablakban (a tartalom belefér), kisebben a megszokott görgetés marad. */
@media (min-width:1620px) and (min-height:840px){
  html{scroll-snap-type:y mandatory}
  .hero,.songs,.page3{min-height:100vh;scroll-snap-align:start;scroll-snap-stop:always}
  .songs{display:flex;flex-direction:column;justify-content:center;padding-top:clamp(40px,4vh,72px);padding-bottom:clamp(40px,4vh,72px)}
  .page3{display:flex;flex-direction:column}
  .page3 .about{flex:1;padding-top:40px;padding-bottom:40px}
  .page3 .about-photo{width:auto;max-width:none;height:min(650px,calc(100vh - 300px))}
  .page3 .site-footer{margin-top:0}
}

/* Szóló kártya animációi: lélegző fény a borító körül + kis hangsáv a hossz mellett */
.time-wrap{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px;width:0;opacity:0;overflow:hidden;transition:width .5s ease,opacity .5s ease}
.eq i{display:block;width:3px;height:100%;background:var(--terra);border-radius:1px;transform-origin:bottom;transform:scaleY(.25)}
.card.is-playing .eq{width:18px;opacity:1}
.card.is-playing .eq i{animation:eq 1s ease-in-out infinite}
.card.is-playing .eq i:nth-child(1){animation-duration:.9s;animation-delay:-.2s}
.card.is-playing .eq i:nth-child(2){animation-duration:1.1s;animation-delay:-.6s}
.card.is-playing .eq i:nth-child(3){animation-duration:.8s;animation-delay:-.4s}
.card.is-playing .eq i:nth-child(4){animation-duration:1.2s;animation-delay:-.1s}
@keyframes eq{0%,100%{transform:scaleY(.2)}25%{transform:scaleY(.85)}50%{transform:scaleY(.45)}75%{transform:scaleY(1)}}
.card.is-playing .cover{animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 22px rgba(224,149,111,.35)}50%{box-shadow:0 0 46px rgba(224,149,111,.8)}}
@media (prefers-reduced-motion:reduce){
  .card.is-playing .cover{animation:none}
  .card.is-playing .eq i{animation:none;transform:scaleY(.6)}
}

/* Erősebb fény: a ragyogás a kártya külső szélén is látszik, a kártya háttere is pulzál */
.card.is-playing{animation:cardGlow 3.2s ease-in-out infinite}
@keyframes cardGlow{
  0%,100%{background:#EBD6B2;box-shadow:0 14px 34px rgba(196,99,63,.30),0 0 26px 2px rgba(224,149,111,.40),0 2px 6px rgba(43,33,26,.14)}
  50%{background:#F4D5A4;box-shadow:0 18px 52px rgba(196,99,63,.45),0 0 80px 18px rgba(244,176,112,.85),0 2px 6px rgba(43,33,26,.14)}
}
@keyframes glow{
  0%,100%{box-shadow:0 0 10px 2px rgba(255,205,160,.5)}
  50%{box-shadow:0 0 20px 9px rgba(255,190,130,.95)}
}
@media (prefers-reduced-motion:reduce){.card.is-playing{animation:none}}

.card{cursor:pointer}


/* Parent-site link beside the original Sunolarium emblem. */
.brand-pair{display:flex;align-items:center;gap:clamp(20px,2.5vw,48px)}
.orelexa-home{display:block;width:clamp(160px,16vw,265px)}
.orelexa-home img{display:block;width:100%;height:auto}
@media(max-width:650px){.site-header{flex-wrap:wrap;gap:16px}.brand-pair{gap:18px}.brand-pair .logo{width:90px}.orelexa-home{width:145px}.lang{margin-top:8px}.lang button{padding:8px 12px}}