@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');

/* =========================================================
   LAZY KIDS PORTFOLIO — shared styles
   ========================================================= */
:root{
  --ink:#09060a;
  --wine:#8e1739;
  --pink:#ff3d6e;
  --rose:#ff7aa8;
  --orange:#ff9a3d;
  --gold:#ffc857;
  --violet:#a855f7;
  --cyan:#22d3ee;
  --text:#fff1f6;
  --muted:#dcc3d2;
  --line:rgba(255,95,150,.30);
  --cursor:#382033;
  --display:'Syne',sans-serif;
  --flow:linear-gradient(100deg,#ff3d6e,#ff7aa8 60%,#ff3d6e);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:'DM Sans',sans-serif;background:var(--ink);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Moving colour glow behind everything ---------- */
body::before{
  content:'';position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 36% at 18% 22%,rgba(255,61,110,.18),transparent 70%),
    radial-gradient(34% 30% at 82% 18%,rgba(142,23,57,.22),transparent 70%),
    radial-gradient(38% 34% at 72% 86%,rgba(255,61,110,.09),transparent 70%);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(4%,3%,0) scale(1.1)}}

#bubbleCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:10001;background:var(--flow);pointer-events:none}

/* everything real sits above the bubbles */
main,.gallery,footer,.footer,.page-hero,.category-bar,.marquee{position:relative;z-index:1}

/* ---------- Header ---------- */
.site-header{padding:20px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:rgba(9,6,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.logo{font:800 19px var(--display);letter-spacing:1px;white-space:nowrap;color:#fff}
.logo span{background:var(--flow);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 7s linear infinite}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{font-size:13px;font-weight:700;color:var(--muted);padding:9px 16px;border-radius:999px;border:1px solid transparent;transition:.2s}
nav a:hover{color:var(--rose);border-color:var(--line)}
nav a.active{color:#fff;background:var(--wine);border-color:#ef426b}
@keyframes shine{to{background-position:220% center}}

/* ---------- Gradient text (headlines & accents) ---------- */
.page-hero h1,.hero h1,.section-title,.services>h2,.content-explanation h3{color:#fff}
.page-hero h1 span,.hero h1 span,.section-title span,.services>h2 span{
  background:var(--flow);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 7s linear infinite;
}

/* ---------- Page hero (YouTube / Ads pages) ---------- */
.page-hero{text-align:center;padding:72px 20px 25px}
.eyebrow,.section-label{color:#ff5278;letter-spacing:4px;font-size:11px;font-weight:800;text-transform:uppercase}
.page-hero h1{font:800 clamp(30px,4.4vw,52px)/1.12 var(--display);margin:16px 0}
.page-hero p{max-width:700px;margin:0 auto;color:var(--muted);line-height:1.8}

/* ---------- Category buttons ---------- */
.category-bar{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:18px 20px 38px}
.category-btn{border:1px solid var(--line);background:rgba(30,12,22,.8);color:#ffe3ee;padding:12px 20px;font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:.2s;border-radius:999px}
.category-btn:hover{border-color:var(--pink);color:#fff;transform:translateY(-2px)}
.category-btn.active{background:var(--wine);border-color:#ef426b;color:#fff;box-shadow:0 6px 22px rgba(142,23,57,.45)}

/* ---------- Video gallery ---------- */
.gallery{width:min(1390px,90%);margin:0 auto 80px}
.section-title{font:800 clamp(22px,3vw,30px) var(--display);margin:12px 0 22px;display:inline-block;position:relative;padding-bottom:10px}
.section-title:after{content:'';position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:3px;background:var(--flow)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-bottom:48px}
.video-card{min-width:0;border:1px solid transparent;background:linear-gradient(#150a10,#0c0709) padding-box,linear-gradient(135deg,rgba(255,61,110,.40),rgba(255,255,255,.06) 60%,rgba(255,61,110,.18)) border-box;overflow:hidden;transition:transform .25s,box-shadow .25s}
.video-card:hover{transform:translateY(-5px);box-shadow:0 16px 38px -14px rgba(255,61,110,.45)}
.thumb{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a0b1f,#0c080a 75%)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.video-card:hover .thumb img{transform:scale(1.06)}
.thumb:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 65%);pointer-events:none;transition:background .3s}
.video-card:hover .thumb:after{background:linear-gradient(0deg,rgba(255,61,110,.28),transparent 70%)}
.play-button{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:#b3214c;color:#fff;display:grid;place-items:center;font-size:24px;padding-left:4px;box-shadow:0 5px 25px #0007;cursor:pointer;transition:.2s}
.play-button:before{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,122,168,.45);animation:ring 2.2s ease-out infinite}
@keyframes ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.video-card:hover .play-button{transform:translate(-50%,-50%) scale(1.1)}
.video-meta{padding:15px 17px 17px}
.video-kicker{color:#ff5278;font-size:10px;letter-spacing:1.7px;font-weight:800;text-transform:uppercase}
.video-meta h3{font:700 15px var(--display);margin:7px 0 0;color:#fff;transition:color .2s}
.video-card:hover .video-meta h3{color:var(--rose)}

/* ---------- Footer ---------- */
footer,.footer{text-align:center;padding:32px 15px;border-top:1px solid;border-image:linear-gradient(90deg,transparent,var(--pink),transparent) 1;color:#c7aabb;font-size:11px;letter-spacing:.5px}
footer p{margin:6px 0}
footer p:first-child{color:var(--rose);font-weight:700}

/* ---------- Video pop-up ---------- */
.player-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:24px}
.player-modal.open{display:flex}
.player-box{width:min(1000px,96vw);background:#0c080a;border:1px solid var(--pink);box-shadow:0 20px 80px #000;position:relative;padding:12px}
.player-frame{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.close-player{position:absolute;right:-13px;top:-15px;width:40px;height:40px;border-radius:50%;border:1px solid #ff9bb8;background:#941b3d;color:#fff;font-size:25px;line-height:1;cursor:pointer;z-index:3}
.player-note{font-size:11px;color:#cdb8c2;padding:10px 3px 2px}
.empty{color:var(--muted);text-align:center;padding:25px;display:none}

/* =========================================================
   HOME PAGE
   ========================================================= */
.hero{min-height:78vh;padding:90px 7% 70px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero h1{font:800 clamp(30px,4.6vw,58px)/1.14 var(--display);margin:20px 0 0;letter-spacing:0}
.hero .portfolio-title{font:800 clamp(16px,2.2vw,24px) var(--display);letter-spacing:10px;margin:22px 0 22px;padding-left:10px;color:transparent;-webkit-text-stroke:1px var(--rose)}
.hero-description{max-width:740px;color:var(--muted);line-height:1.9}

/* one load-in sequence for the hero */
.hero>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero>*:nth-child(2){animation-delay:.1s}
.hero>*:nth-child(3){animation-delay:.2s}
.hero>*:nth-child(4){animation-delay:.3s}
.hero>*:nth-child(5){animation-delay:.42s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

.portfolio-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:min(1000px,100%);margin-top:42px;text-align:left}
.portfolio-box{display:block;padding:32px;border:1px solid transparent;background:linear-gradient(#150a10,#0c0709) padding-box,linear-gradient(135deg,var(--pink),rgba(255,255,255,.07) 55%,var(--wine)) border-box;transition:transform .25s,box-shadow .25s}
.portfolio-box:hover{transform:translateY(-5px);box-shadow:0 16px 40px -14px rgba(255,61,110,.45)}
.box-number{display:block;color:#ff5278;font-size:12px;font-weight:800;letter-spacing:3px}
.portfolio-box h2{font:800 24px var(--display);margin:12px 0;color:#fff}
.portfolio-box p{color:var(--muted);font-size:13px;line-height:1.8;margin:0}
.view-link{display:flex;gap:8px;margin-top:22px;color:#ff5278;font-size:11px;font-weight:800;letter-spacing:1.5px;transition:gap .2s}
.portfolio-box:hover .view-link{gap:16px}

/* scrolling keyword strip */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(142,23,57,.18);padding:14px 0}
.marquee-track{display:flex;width:max-content;animation:scroll 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{color:var(--rose);font:800 13px var(--display);letter-spacing:5px;padding:0 26px;white-space:nowrap}
.marquee-track span:after{content:'✦';margin-left:52px;color:var(--pink)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* services */
.services{width:min(1100px,88%);margin:0 auto;padding:70px 0 80px;text-align:center}
.services>h2{font:800 clamp(24px,3.4vw,38px)/1.2 var(--display);margin:14px 0}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px;text-align:left}
.service-card{--c:var(--pink);padding:28px;border:1px solid transparent;background:linear-gradient(#150a10,#0c0709) padding-box,linear-gradient(145deg,var(--c),rgba(255,255,255,.06) 60%) border-box;box-shadow:inset 0 3px 0 var(--c);transition:transform .25s,box-shadow .25s}
.service-card:hover{transform:translateY(-6px);box-shadow:inset 0 3px 0 var(--c),0 16px 36px -16px var(--c)}
.service-card>span{color:var(--c);font:800 13px var(--display);letter-spacing:2px}
.service-card h3{font:800 17px var(--display);margin:12px 0 10px;color:#fff}
.service-card p{color:var(--muted);font-size:13px;line-height:1.8;margin:0}

.content-explanation{max-width:860px;margin:64px auto 0;padding:38px;border:1px solid transparent;background:linear-gradient(#150a10,#0c0709) padding-box,linear-gradient(135deg,var(--wine),rgba(255,255,255,.06) 50%,var(--pink)) border-box;text-align:left}
.content-explanation h3{font:800 clamp(20px,2.6vw,26px)/1.3 var(--display);margin:12px 0 18px}
.content-explanation p{color:var(--muted);font-size:14px;line-height:1.9}
.content-explanation .section-label{margin:0}

/* ---------- Custom cursor ---------- */
.cursor-dot{position:fixed;left:-40px;top:-40px;width:15px;height:15px;border-radius:50%;background:var(--cursor);border:1px solid #79516b;box-shadow:0 0 12px #38203380;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .15s,height .15s,background .15s}
.cursor-dot.hover{width:25px;height:25px;background:#4a2b43}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-header{flex-direction:column;position:relative}
  .gallery{width:92%}
}
@media(max-width:560px){
  .video-grid{grid-template-columns:1fr;gap:20px}
  .service-grid,.portfolio-buttons{grid-template-columns:1fr}
  .gallery{width:91%}
  .page-hero{padding-top:50px}
  .category-btn{padding:11px 13px;font-size:10px}
  .logo{font-size:16px}
  nav a{padding:8px 12px;font-size:12px}
  .player-modal{padding:12px}
  .close-player{right:-5px;top:-14px}
  .hero{padding:60px 6% 50px}
  .hero .portfolio-title{letter-spacing:6px;padding-left:6px}
  .portfolio-box,.content-explanation{padding:24px}
}
@media(hover:hover) and (pointer:fine){body{cursor:none}a,button{cursor:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* =========================================================
   VIDEO POP-UP — full screen on phones
   ========================================================= */
.player-bar{display:contents}
body.player-open .scroll-progress{display:none}

@media (max-width:820px),(max-height:500px){
  .player-modal{padding:0;background:#000}
  .player-box{width:100vw;height:100vh;height:100dvh;max-width:none;padding:0;border:0;box-shadow:none;display:flex;flex-direction:column}
  .player-bar{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;height:52px;padding:0 10px;background:#0c080a;border-bottom:1px solid var(--line)}
  .close-player{position:static;flex:0 0 auto}
  .player-frame{flex:1 1 auto;width:100%;height:auto;min-height:0;aspect-ratio:auto}
  .player-note{display:none}
}
@media (max-height:500px){.player-bar{height:44px}}

/* Drive's player hides/clips its buttons on narrow widths.
   On phones the player is laid out on a wider canvas (min ~560px, set by script.js
   through --s) and scaled down to fit, so play, time, volume and fullscreen all show. */
.player-stage{display:contents}
@media (max-width:820px),(max-height:500px){
  .player-stage{display:block;position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#000}
  .player-stage .player-frame{position:absolute;top:0;left:0;width:calc(100% / var(--s,1));height:calc(100% / var(--s,1));transform:scale(var(--s,1));transform-origin:top left}
}