/* =========================================================
   LOLIPOPZ — design system
   Trust: deep navy + warm gold. Creative "pop": candy pink/red.
   ========================================================= */

:root{
  --bg-dark:#0a0f1c;
  --bg-dark-2:#121a2b;
  --surface-dark:#1a2338;
  --bg-light:#f6f2e7;
  --surface-light:#ffffff;

  --text-light:#f5f1e8;
  --text-light-muted:#aab4c8;
  --text-dark:#17202f;
  --text-dark-muted:#5b6476;

  --trust:#2e7dab;
  --trust-2:#1c5f85;
  --gold:#e3a94a;
  --pop:#e2436b;
  --pop-2:#f06a86;

  --radius:16px;
  --radius-sm:10px;
  --shadow-soft:0 20px 50px -20px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,1,.36,1);
  --container:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:var(--bg-dark);
  color:var(--text-light);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3{font-family:'Anton',sans-serif; font-weight:400; letter-spacing:.02em; line-height:1.05; margin:0 0 .4em;}
p{line-height:1.7; margin:0 0 1em;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}

/* -------- reveal-on-scroll -------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* -------- noise / grain -------- */
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Lollipop "O" motif — used in wordmark
   ========================================================= */
.lolli{
  position:relative;
  display:inline-block;
  width:.78em; height:.78em;
  border-radius:50%;
  vertical-align:-.03em;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), transparent 42%),
    conic-gradient(from 90deg, var(--pop) 0deg, var(--gold) 90deg, var(--pop-2) 180deg, var(--gold) 270deg, var(--pop) 360deg);
  box-shadow:0 0 0 2px rgba(0,0,0,.08) inset;
  animation:spin-slow 14s linear infinite;
}
.lolli::after{
  content:'';
  position:absolute;
  left:50%; top:92%;
  width:2px; height:.5em;
  background:var(--gold);
  border-radius:2px;
  transform:translateX(-50%) rotate(8deg);
  transform-origin:top center;
}
.lolli-lg{width:.72em; height:.72em;}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:18px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(10,15,28,.82);
  backdrop-filter:blur(14px);
  padding:12px 0;
  box-shadow:0 10px 30px -15px rgba(0,0,0,.6);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}

.brand{display:inline-flex; align-items:center;}
.brand-word{
  font-family:'Anton',sans-serif;
  font-size:22px;
  letter-spacing:.04em;
  color:var(--text-light);
}

.main-nav ul{display:flex; gap:32px;}
.main-nav a{
  font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  position:relative; padding:6px 0; color:var(--text-light-muted);
  transition:color .25s;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--pop),var(--gold));
  transition:width .3s var(--ease);
}
.main-nav a:hover{color:var(--text-light);}
.main-nav a:hover::after{width:100%;}

.header-actions{display:flex; align-items:center; gap:18px;}
.lang-switch{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.05em;}
.lang-btn{background:none; border:none; color:var(--text-light-muted); cursor:pointer; padding:4px 2px; font:inherit;}
.lang-btn.is-active{color:var(--gold);}
.lang-sep{color:var(--text-light-muted); opacity:.5;}

.burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:24px; background:none; border:none; cursor:pointer; padding:0;}
.burger span{display:block; width:100%; height:2px; background:var(--text-light); transition:transform .3s var(--ease), opacity .3s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:140px 0 80px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(46,125,171,.25), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(226,67,107,.18), transparent 55%),
    linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-swirl{
  position:absolute; border-radius:50%;
  background:conic-gradient(from 0deg, var(--pop), var(--gold), var(--pop));
  opacity:.08; filter:blur(2px);
  animation:float-rot 22s ease-in-out infinite;
}
.swirl-1{width:380px; height:380px; top:-120px; right:-80px;}
.swirl-2{width:220px; height:220px; bottom:5%; left:-60px; animation-delay:-6s;}
.swirl-3{width:140px; height:140px; top:40%; right:18%; animation-delay:-12s; opacity:.05;}
@keyframes float-rot{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-30px) rotate(180deg); }
}

.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;}

.eyebrow{
  text-transform:uppercase; font-size:13px; letter-spacing:.18em; font-weight:700;
  color:var(--gold); margin-bottom:18px;
}
.hero-title{font-size:clamp(52px, 9vw, 108px); margin-bottom:10px;}
.hero-title-line{display:inline-block;}
.hero-slogan{
  font-family:'Pacifico',cursive; font-size:clamp(22px,3vw,32px);
  color:var(--pop-2); margin-bottom:18px;
}
.hero-subtitle{font-size:17px; color:var(--text-light-muted); max-width:520px;}
.hero-roles{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-light); margin-bottom:34px;
}
.hero-roles .dot{color:var(--gold);}

.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border-radius:999px; font-weight:700; font-size:14px;
  letter-spacing:.03em; text-transform:uppercase; cursor:pointer; border:2px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
}
.btn-primary{
  background:linear-gradient(90deg, var(--pop), var(--pop-2));
  color:#fff; box-shadow:0 14px 30px -12px rgba(226,67,107,.55);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 36px -12px rgba(226,67,107,.65);}
.btn-ghost{border-color:rgba(245,241,232,.35); color:var(--text-light);}
.btn-ghost:hover{background:rgba(245,241,232,.08); transform:translateY(-3px);}

.hero-visual{display:flex; justify-content:center;}
.photo-frame{
  position:relative; width:min(360px, 80vw); aspect-ratio:4/5;
  border-radius:var(--radius); padding:10px;
  background:linear-gradient(145deg, var(--gold), var(--pop));
  box-shadow:var(--shadow-soft);
}
.hero-photo{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:calc(var(--radius) - 6px);
  background:var(--surface-dark);
}
.frame-tag{
  position:absolute; bottom:-14px; right:18px;
  background:var(--bg-dark); color:var(--gold);
  font-size:12px; font-weight:700; letter-spacing:.05em;
  padding:6px 14px; border-radius:999px; border:1px solid rgba(227,169,74,.4);
}

.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-light-muted);
  z-index:1;
}
.scroll-hint i{
  width:1px; height:26px; background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scroll-pulse 1.8s ease-in-out infinite;
}
@keyframes scroll-pulse{ 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* =========================================================
   SECTIONS (generic)
   ========================================================= */
.section{padding:110px 0;}
.section-dark{background:var(--bg-dark-2); color:var(--text-light);}
.section-light{background:var(--bg-light); color:var(--text-dark);}
.section-light .text-light-muted, .section-light p{color:var(--text-dark-muted);}
.section-light h2, .section-light h3{color:var(--text-dark);}

.tag-label{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pop); margin-bottom:12px;
}
.center{text-align:center;}
.section-sub{max-width:560px; margin:0 auto 50px; opacity:.85;}
.section-dark .section-sub{color:var(--text-light-muted);}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:70px; align-items:start;}
.about-copy h2{font-size:clamp(32px,4vw,46px);}
.about-copy a{color:var(--trust-2); font-weight:600; border-bottom:1px solid rgba(28,95,133,.35); transition:border-color .25s;}
.about-copy a:hover{border-color:var(--trust-2);}
.stat-num{display:block; font-family:'Anton',sans-serif; font-size:40px; color:var(--trust-2);}
.stat-label{font-size:13px; color:var(--text-dark-muted); letter-spacing:.02em;}

.stats-card{
  background:var(--surface-light); border-radius:var(--radius); padding:40px 36px;
  box-shadow:0 30px 60px -30px rgba(23,32,47,.25);
  border-top:4px solid var(--gold);
  display:flex; flex-direction:column; gap:26px;
}
.stat-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:26px; border-bottom:1px solid rgba(23,32,47,.08);
}
.stat-row:last-child{padding-bottom:0; border-bottom:none;}
.stat-row .stat-label{text-align:right;}

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:20px;}
.service-card{
  background:var(--surface-dark); border-radius:var(--radius); padding:34px 26px;
  border:1px solid rgba(245,241,232,.06);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.service-card:hover{transform:translateY(-8px); box-shadow:0 24px 50px -24px rgba(0,0,0,.55); border-color:rgba(227,169,74,.35);}
.service-icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(226,67,107,.18), rgba(227,169,74,.18));
  color:var(--gold);
}
.service-icon svg{width:26px; height:26px;}
.service-card h3{font-size:20px; margin-bottom:10px; color:var(--text-light);}
.service-card p{font-size:14px; color:var(--text-light-muted);}

/* =========================================================
   PORTFOLIO (tabs: casting / music / video / foto)
   ========================================================= */
.tabs{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:50px;}
.tab-btn{
  background:none; border:1px solid rgba(245,241,232,.25); color:var(--text-light-muted);
  padding:11px 24px; border-radius:999px; font:inherit; font-size:13px; font-weight:700;
  letter-spacing:.02em; cursor:pointer; transition:all .25s var(--ease);
}
.tab-btn:hover{border-color:var(--pop); color:var(--pop);}
.tab-btn.is-active{background:var(--pop); border-color:var(--pop); color:#fff;}

.portfolio-panel{display:none;}
.portfolio-panel.is-active{display:block; animation:panel-in .5s var(--ease);}
@keyframes panel-in{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

/* video — Instagram reels */
.reels-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px;
}
.reel-item{
  margin:0; border-radius:var(--radius-sm); overflow:hidden;
  background:#fff; box-shadow:var(--shadow-soft);
}
.reel-frame{display:block; width:100%; height:560px; border:0;}

/* casting photos — slideshow */
.slideshow{
  position:relative; width:min(520px, 100%); margin:0 auto; aspect-ratio:4/5;
  border-radius:var(--radius); overflow:hidden;
  background:var(--surface-dark); box-shadow:var(--shadow-soft);
}
.slides{position:absolute; inset:0;}
.slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s var(--ease);
}
.slide.is-active{opacity:1;}
.slide-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(10,15,28,.55); color:#fff; font-size:28px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease);
}
.slide-nav:hover{background:var(--pop);}
.slide-prev{left:14px;}
.slide-next{right:14px;}
.slide-counter{
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(10,15,28,.6); color:var(--gold);
  font-size:12px; font-weight:700; letter-spacing:.05em;
  padding:5px 12px; border-radius:999px;
}
.slide-dots{
  position:absolute; bottom:16px; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:8px;
}
.slide-dot{
  width:10px; height:10px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.5); transition:background .3s, transform .3s;
}
.slide-dot.is-active{background:var(--pop); transform:scale(1.3);}

/* music — square grid */
.music-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:18px;
}
.music-item{margin:0; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/9; background:#000;}

/* click-to-play YouTube */
.yt-lazy{
  position:relative; display:block; width:100%; height:100%;
  padding:0; border:none; cursor:pointer; background:#000;
}
.yt-lazy img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease), opacity .3s;
}
.yt-lazy .play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:rgba(10,15,28,.6); border:2px solid rgba(245,241,232,.6);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.yt-lazy .play-icon svg{width:22px; height:22px; fill:#fff; margin-left:4px;}
.yt-lazy:hover img{transform:scale(1.05); opacity:.85;}
.yt-lazy:hover .play-icon{background:var(--pop); border-color:var(--pop); transform:translate(-50%,-50%) scale(1.1);}
.yt-frame{display:block; width:100%; height:100%; border:0;}

/* =========================================================
   PHOTO GALLERY (foto tab)
   ========================================================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:160px;
  gap:18px;
  margin-top:20px;
}
.gallery-item{margin:0; border-radius:var(--radius-sm); overflow:hidden;}
.gallery-wide{grid-column:span 2;}
.gallery-tall{grid-row:span 2;}
.gallery-ph{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--trust-2), var(--pop), var(--gold));
  background-size:220% 220%;
  color:rgba(255,255,255,.85);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .5s var(--ease), background-position .8s var(--ease);
}
.gallery-ph::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px);
}
.gallery-ph span{
  position:relative; z-index:1; border:1px dashed rgba(255,255,255,.5);
  padding:6px 14px; border-radius:999px;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item:hover .gallery-ph{transform:scale(1.06); background-position:100% 100%;}

.gallery-cta{
  text-align:center; margin-top:44px; font-size:15px; color:var(--text-light-muted);
}
.gallery-cta a{
  color:var(--gold); font-weight:700; margin-left:8px;
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.gallery-cta a:hover{border-color:var(--gold);}

@media (max-width:980px){
  .gallery-grid{grid-template-columns:repeat(3,1fr); grid-auto-rows:130px;}
}
@media (max-width:620px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:120px;}
  .gallery-wide{grid-column:span 2;}
  .gallery-tall{grid-row:span 1;}
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;}
.contact-copy h2{font-size:clamp(32px,4vw,46px);}
.contact-list{margin-top:34px; display:flex; flex-direction:column; gap:18px;}
.contact-list li{display:flex; flex-direction:column; gap:2px;}
.contact-label{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-light-muted);}
.contact-list a{font-size:18px; font-weight:600; transition:color .25s;}
.contact-list a:hover{color:var(--gold);}

.contact-form{
  background:var(--surface-dark); border-radius:var(--radius); padding:36px;
  display:flex; flex-direction:column; gap:18px;
  border:1px solid rgba(245,241,232,.07);
}
.contact-form label{display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--text-light-muted);}
.contact-form input, .contact-form textarea{
  background:var(--bg-dark); border:1px solid rgba(245,241,232,.12); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--text-light); font:inherit; resize:vertical;
  transition:border-color .25s;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--gold);}
.contact-form .btn{margin-top:4px;}
.form-note{font-size:12px; color:var(--text-light-muted); margin:0;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--bg-dark); padding:36px 0; border-top:1px solid rgba(245,241,232,.08);}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.footer-copy{font-size:13px; color:var(--text-light-muted); margin:0;}
.to-top{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(245,241,232,.2);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.to-top:hover{background:var(--gold); color:var(--bg-dark); border-color:var(--gold); transform:translateY(-3px);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:46px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero-cta, .hero-roles{justify-content:center;}
  .hero-subtitle{margin:0 auto;}
  .hero-visual{order:-1;}
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background:var(--bg-dark-2); padding:110px 32px 40px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    box-shadow:-20px 0 50px rgba(0,0,0,.4);
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav ul{flex-direction:column; gap:26px;}
  .burger{display:flex;}
  .lang-switch{font-size:11px;}
  .services-grid{grid-template-columns:1fr;}
  .section{padding:80px 0;}
  .hero{padding:120px 0 70px;}
}

@media (max-width: 420px){
  .hero-cta{flex-direction:column; width:100%;}
  .btn{width:100%;}
  .stats{gap:26px;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}