/*
Theme Name: Tzayla
Theme URI: https://tzayla.com
Author: Tzayla
Author URI: https://tzayla.com
Description: Official homepage theme for Tzayla — personal pop artist. Paris of the East.
Version: 1.0.0
License: All Rights Reserved
Text Domain: tzayla
Tags: one-page, music, artist, dark, full-site
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Geist+Mono:wght@300..500&display=swap');

html, body { margin: 0; padding: 0; }
body { background: #0A0605; }

:root{
    --bg:        #0A0605;
    --bg-2:      #14090A;
    --cream:     #F2E8D2;
    --cream-2:   rgba(242,232,210,.74);
    --cream-3:   rgba(242,232,210,.48);
    --cream-4:   rgba(242,232,210,.22);
    --red:       #D3303E;
    --red-deep:  #A8232E;
    --red-blood: #5A0E15;
    --rule:      rgba(242,232,210,.12);
    --rule-2:    rgba(242,232,210,.22);

    --sans: 'Helvetica Neue', Helvetica, "Inter", Arial, sans-serif;
    --serif:'Cormorant Garamond', "Bodoni 72", serif;
    --mono: 'Geist Mono', ui-monospace, monospace;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  html, body{ background:var(--bg); color:var(--cream); }
  body{
    font-family:var(--sans);
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{ background:var(--red); color:var(--cream); }
  .mono{ font-family:var(--mono); }
  .serif{ font-family:var(--serif); font-style:italic; }

  /* film grain */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .82  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.55; mix-blend-mode:screen;
  }

  /* ==========================================================
     HEADER — thin, blurred, icons
     ========================================================== */
  header.top{
    position:fixed; top:0; left:0; right:0;
    z-index:60;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding:16px 36px;
    background: rgba(10,6,5,.45);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid var(--rule);
  }
  .wordmark{
    font-weight:300;
    font-size:13px;
    letter-spacing:.62em; text-indent:.62em;
    color:var(--cream); text-decoration:none;
    justify-self:start;
    transition: color .25s;
  }
  .wordmark:hover{ color:var(--red); }
  .wordmark sup{
    font-family:var(--mono);
    font-size:8px; letter-spacing:.2em;
    color:var(--red);
    margin-left:.4em;
    vertical-align:.6em;
    font-weight:400;
  }

  .countdown{
    justify-self:center;
    display:inline-flex; align-items:center; gap:14px;
    font-family:var(--mono);
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--cream-3);
    font-weight:400;
  }
  .countdown .dot{
    width:5px; height:5px; border-radius:50%;
    background:var(--red);
    box-shadow:0 0 0 0 rgba(211,48,62,.4);
    animation: dot 1.8s ease-in-out infinite;
  }
  .countdown strong{
    color: var(--cream);
    font-weight:500;
  }
  .countdown em{
    color: var(--red);
    font-style:normal;
    font-weight:500;
  }
  @keyframes dot{
    0%,100%{ box-shadow: 0 0 0 0 rgba(211,48,62,.5); }
    50%   { box-shadow: 0 0 0 8px rgba(211,48,62,0); }
  }

  .socials{
    justify-self:end;
    display:flex; align-items:center; gap:22px;
  }
  .socials a{
    color:var(--cream-2);
    transition: color .25s, transform .25s;
    display:inline-flex;
  }
  .socials a:hover{ color:var(--red); transform: translateY(-1px); }
  .socials a svg{ width:17px; height:17px; display:block; }

  @media (max-width: 880px){
    header.top{ grid-template-columns: 1fr auto; padding:13px 18px; }
    .countdown{ display:none; }
    .socials{ gap:18px; }
    .socials a svg{ width:16px; height:16px; }
    .wordmark{ font-size:11px; letter-spacing:.5em; text-indent:.5em; }
  }

  /* ==========================================================
     HERO
     ========================================================== */
  .hero{
    position:relative;
    min-height:100vh;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    align-items:center;
    gap:80px;
    padding: 130px 64px 90px;
    max-width:1480px;
    margin:0 auto;
    overflow:visible;
  }
  .hero::before{
    content:""; position:absolute; inset:-10% 0 -10% 0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(ellipse at 75% 50%, rgba(211,48,62,.18), transparent 55%),
      radial-gradient(ellipse at 8% 88%, rgba(168,35,46,.08), transparent 55%);
  }

  .hero-left{ position:relative; }

  .hero-kicker{
    display:inline-flex; align-items:center; gap:14px;
    font-family:var(--mono);
    font-size:10px; letter-spacing:.34em; text-transform:uppercase;
    color: var(--cream-2);
    margin-bottom: 48px;
  }
  .hero-kicker .bars{
    display:inline-flex; align-items:flex-end; gap:3px;
    height:12px;
  }
  .hero-kicker .bars span{
    width:2px; background:var(--red); display:block;
    animation: bar 1.1s ease-in-out infinite;
    border-radius:1px;
    transform-origin:bottom;
  }
  .hero-kicker .bars span:nth-child(1){ height:35%; animation-delay:0s; }
  .hero-kicker .bars span:nth-child(2){ height:95%; animation-delay:.15s; }
  .hero-kicker .bars span:nth-child(3){ height:55%; animation-delay:.3s; }
  .hero-kicker .bars span:nth-child(4){ height:80%; animation-delay:.45s; }
  @keyframes bar{
    0%,100%{ transform: scaleY(.35); }
    50%   { transform: scaleY(1); }
  }
  .hero-kicker .red-text{ color: var(--red); }
  .hero-kicker .div{ color:var(--cream-4); }

  .hero-title{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size: clamp(72px, 11vw, 192px);
    line-height: .86;
    letter-spacing: -.025em;
    color: var(--cream);
    margin-bottom: 36px;
    text-wrap: balance;
  }
  .hero-title .l{ display:block; }
  .hero-title .l2{
    padding-left: 1.4em;
    color: var(--cream-2);
    font-size: .56em;
    line-height:1;
    margin: .04em 0;
  }
  .hero-title .l3{
    color: var(--cream);
  }
  .hero-title .red-dot{ color: var(--red); }

  .hero-sub{
    display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
    margin-bottom:54px;
    font-family:var(--mono);
    font-size:11px; letter-spacing:.28em; text-transform:uppercase;
    color: var(--cream-3);
    font-weight:400;
  }
  .hero-sub strong{ color: var(--cream); font-weight:500; }
  .hero-sub .sep{ color: var(--cream-4); }
  .hero-sub em{
    font-family:var(--serif); font-style:italic; font-weight:400;
    color: var(--cream);
    text-transform:none; letter-spacing:.005em;
    font-size:18px;
  }

  .cta-row{
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  }
  .cta{
    position:relative;
    display:inline-flex; align-items:center; gap:18px;
    height:74px;
    padding:0 44px;
    background:var(--cream);
    color:var(--bg);
    text-decoration:none;
    border-radius:999px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.34em;
    text-transform:uppercase;
    text-indent:.34em;
    transition: background .35s, color .35s, padding .35s, transform .35s, box-shadow .35s, letter-spacing .35s;
    box-shadow: 0 18px 60px -14px rgba(242,232,210,.36);
    overflow:hidden;
    isolation:isolate;
  }
  .cta::before{
    content:""; position:absolute; inset:0;
    background:var(--red);
    transform: translateX(-100%);
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    z-index:-1;
  }
  .cta:hover{
    color:var(--cream);
    transform: translateY(-3px);
    padding:0 56px;
    letter-spacing:.42em;
    box-shadow: 0 24px 70px -14px rgba(211,48,62,.65);
  }
  .cta:hover::before{ transform: translateX(0); }
  .cta .arrow{ display:inline-flex; transition: transform .35s; }
  .cta:hover .arrow{ transform: translateX(8px); }

  .cta-meta{
    font-family:var(--mono);
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color: var(--cream-3);
    line-height:1.8;
  }
  .cta-meta strong{ color: var(--cream); font-weight:500; }

  /* Hero album art */
  .hero-art{
    position:relative;
    justify-self:end;
  }
  .hero-art-frame{
    position:relative;
    width: min(520px, 100%);
    aspect-ratio: 1 / 1;
    border-radius: 3px;
    overflow:hidden;
    transform: rotate(1.6deg);
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
    box-shadow:
      0 80px 140px -40px rgba(0,0,0,.7),
      0 30px 60px -30px rgba(0,0,0,.6),
      0 0 0 1px rgba(0,0,0,.4);
    isolation: isolate;
  }
  .hero-art-frame:hover{
    transform: rotate(0deg) scale(1.015);
  }
  .hero-art-frame img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform: scale(1.02);
  }
  /* red glow */
  .hero-art::after{
    content:""; position:absolute; inset: -18% -16% -22% -16%;
    background: radial-gradient(ellipse at 60% 55%, rgba(211,48,62,.36), transparent 65%);
    z-index:-1;
    filter: blur(40px);
    pointer-events:none;
  }
  .hero-art .side-stamp{
    position:absolute;
    top:50%; right:-26px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    font-family:var(--mono);
    font-size:10px; letter-spacing:.46em; text-transform:uppercase;
    color: var(--cream-3);
    white-space:nowrap;
  }
  .hero-art .top-stamp,
  .hero-art .bot-stamp{
    position:absolute;
    left:6px;
    font-family:var(--mono);
    font-size:9px; letter-spacing:.42em; text-transform:uppercase;
    color: var(--cream-3);
    white-space:nowrap;
  }
  .hero-art .top-stamp{ top:-18px; }
  .hero-art .bot-stamp{ bottom:-18px; }

  @media (max-width: 1020px){
    .hero{ grid-template-columns: 1fr; gap:60px; padding: 120px 28px 60px; min-height:auto; }
    .hero-art{ order:-1; justify-self:center; margin-bottom:8px; }
    .hero-art-frame{ width: min(440px, 88vw); }
    .hero-art .side-stamp{ display:none; }
  }
  @media (max-width: 560px){
    .hero{ padding: 100px 22px 50px; gap:48px; }
    .cta{ height:62px; padding:0 30px; font-size:10px; letter-spacing:.28em; }
    .cta:hover{ padding:0 36px; letter-spacing:.34em; }
    .hero-kicker{ margin-bottom: 32px; }
    .hero-title{ margin-bottom: 26px; }
    .hero-sub{ margin-bottom: 38px; gap:12px; }
    .hero-art-frame{ width: 86vw; }
  }

  /* ==========================================================
     MANIFESTO
     ========================================================== */
  .manifesto{
    position:relative;
    padding: 120px 64px 100px;
    text-align:center;
    max-width:1100px; margin:0 auto;
  }
  .manifesto::before{
    content:""; display:block;
    width:1px; height:64px;
    background: linear-gradient(to bottom, transparent, var(--cream-4), transparent);
    margin: 0 auto 56px;
  }
  .manifesto p{
    font-family:var(--serif);
    font-style:italic; font-weight:400;
    line-height:.98;
    letter-spacing:-.012em;
    color: var(--cream);
  }
  .manifesto .l1{ font-size: clamp(40px, 5.6vw, 96px); }
  .manifesto .l2{
    font-size: clamp(22px, 2.4vw, 36px);
    color: var(--cream-3);
    margin: 18px 0;
  }
  .manifesto .l3{
    font-size: clamp(40px, 5.6vw, 96px);
    color: var(--red);
  }

  @media (max-width: 880px){
    .manifesto{ padding: 70px 24px 60px; }
    .manifesto::before{ height:50px; margin-bottom:40px; }
  }

  /* ==========================================================
     TRACKLIST
     ========================================================== */
  .album{
    position:relative; z-index:2;
    padding: 30px 64px 140px;
    max-width:1100px; margin:0 auto;
  }
  .album-head{
    margin-bottom:60px;
    display:grid;
    grid-template-columns: 1fr auto;
    gap:40px;
    align-items:end;
  }
  .album-head .label{
    font-family:var(--mono);
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    color: var(--red);
    margin-bottom:22px;
  }
  .album-head h2{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size: clamp(48px, 6.4vw, 108px);
    line-height:.92;
    letter-spacing:-.025em;
    color: var(--cream);
  }
  .album-head h2 .red{ color: var(--red); }
  .album-head .info{
    text-align:right;
    font-family:var(--mono);
    font-size:10px; letter-spacing:.2em; text-transform:uppercase;
    color: var(--cream-2);
    line-height:2.2;
    font-weight:400;
  }
  .album-head .info strong{ color: var(--cream); font-weight:500; }

  .tracklist{
    list-style:none;
    border-top: 1px solid var(--rule);
  }
  .track{
    display:grid;
    grid-template-columns: 44px 48px 1fr auto;
    align-items:center;
    gap:24px;
    padding:16px 4px;
    border-bottom: 1px solid var(--rule);
    transition: padding .35s cubic-bezier(.2,.7,.2,1), background .35s;
  }
  .track:hover{
    padding-left:16px; padding-right:16px;
    background: rgba(211,48,62,.04);
  }
  .track .num{
    font-family:var(--mono);
    font-size:11px; letter-spacing:.22em;
    color: var(--cream-3);
    font-variant-numeric: tabular-nums;
  }
  .track .thumb{
    width:42px; height:42px;
    background-color: var(--bg-2);
    background-size: cover; background-position: center;
    border: 1px solid var(--cream-4);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .35s, opacity .3s, filter .3s;
  }
  .track:hover .thumb{
    transform: scale(1.08);
    border-color: var(--red);
  }
  .track.coming .thumb{
    opacity: .42;
    filter: saturate(.4);
  }
  .track.coming:hover .thumb{ opacity:1; filter: saturate(1); }

  .track .title{
    font-family:var(--sans);
    font-weight:500;
    font-size: 18px;
    color: var(--cream);
    line-height: 1.1;
    letter-spacing:-.005em;
    transition: color .3s, transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .track:hover .title{ transform: translateX(6px); }
  .track.coming .title{
    color: var(--cream-3);
    font-weight:400;
  }
  .track.coming:hover .title{ color: var(--red); }

  .track .status{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--mono);
    font-size:10px; letter-spacing:.22em;
    color: var(--cream-3);
    text-transform:uppercase;
    white-space:nowrap;
    font-variant-numeric: tabular-nums;
  }
  .track .status.out{
    color: var(--cream); font-weight:500;
  }
  .track .status.out::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background: var(--red);
    display:inline-block;
    box-shadow: 0 0 0 0 rgba(211,48,62,.55);
    animation: dot 1.8s ease-in-out infinite;
  }
  .track a.status.pre{
    font-family:var(--sans);
    background:transparent;
    border: 1px solid var(--cream-4);
    color: var(--cream);
    padding:8px 18px;
    border-radius:999px;
    text-decoration:none;
    font-weight:500;
    letter-spacing:.24em;
    font-size:10px;
    transition: background .3s, border-color .3s, color .3s, padding .3s;
  }
  .track a.status.pre:hover{
    background: var(--red);
    border-color: var(--red);
    color: var(--cream);
    padding:8px 22px;
  }
  .track a.status.pre svg{ width:11px; height:11px; }

  /* Full-row clickable for tracks with destination pages */
  .track.has-link{ cursor:pointer; }
  .track.has-link .row-link{
    position:absolute; inset:0; z-index:1;
    text-indent:-9999px; overflow:hidden;
  }
  .track{ position:relative; }

  @media (max-width: 880px){
    .album{ padding: 30px 22px 90px; }
    .album-head{ grid-template-columns: 1fr; gap:18px; margin-bottom:40px; }
    .album-head .info{ text-align:left; }
    .track{
      grid-template-columns: 28px 42px 1fr auto;
      gap:14px;
      padding:14px 4px;
    }
    .track:hover{ padding-left:6px; padding-right:6px; }
    .track .num{ font-size:10px; }
    .track .title{ font-size:15px; }
    .track .status{ font-size:9px; }
  }

  /* ==========================================================
     FOOTER
     ========================================================== */
  footer.foot{
    position:relative;
    background:#06030A;
    color: var(--cream);
    border-top:1px solid var(--rule);
    padding: 110px 64px 32px;
    overflow:hidden;
  }
  footer.foot::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(211,48,62,.14), transparent 50%);
  }
  .foot-inner{
    position:relative;
    max-width:1100px; margin:0 auto;
    text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:46px;
  }
  .foot-inner .big{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size: clamp(40px, 5.4vw, 96px);
    line-height:.96;
    letter-spacing:-.018em;
    color: var(--cream);
    max-width:920px;
  }
  .foot-inner .big .red{ color: var(--red); }
  .foot-inner .countdown-big{
    font-family:var(--mono);
    font-size:11px; letter-spacing:.4em; text-transform:uppercase;
    color: var(--cream-2);
    display:inline-flex; align-items:center; gap:14px;
  }
  .foot-inner .countdown-big .dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--red);
    box-shadow:0 0 0 0 rgba(211,48,62,.5);
    animation: dot 1.8s ease-in-out infinite;
  }
  .foot-inner .countdown-big em{
    color: var(--red); font-style:normal; font-weight:500;
  }
  .foot-inner .countdown-big strong{ color: var(--cream); font-weight:500; }

  .foot-socials{
    display:flex; align-items:center; justify-content:center; gap:30px;
    padding-top: 12px;
  }
  .foot-socials a{
    color: var(--cream-2);
    display:inline-flex; align-items:center; gap:10px;
    text-decoration:none;
    font-family:var(--mono);
    font-size:10px; letter-spacing:.32em; text-transform:uppercase;
    transition: color .25s, transform .25s;
  }
  .foot-socials a:hover{ color: var(--red); transform: translateY(-2px); }
  .foot-socials a svg{ width:16px; height:16px; }

  .foot-meta{
    position:relative;
    max-width:1100px; margin:80px auto 0;
    padding-top:24px;
    border-top:1px solid var(--rule);
    display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
    font-family:var(--mono);
    font-size:10px; letter-spacing:.28em; text-transform:uppercase;
    color: var(--cream-3);
  }
  .foot-meta a{ color: inherit; text-decoration:none; }
  .foot-meta a:hover{ color: var(--cream); }

  @media (max-width: 880px){
    footer.foot{ padding: 70px 22px 28px; }
    .foot-inner{ gap:36px; }
    .foot-socials{ gap:24px; flex-wrap:wrap; }
    .foot-socials a span{ display:none; }
    .foot-meta{ margin-top:50px; }
  }