/* Global base styles */
:root{
  --bg-color: url('assets/gummy_bear_backdrop.jpg') center/cover no-repeat, linear-gradient(#fdf1e4,#ffe6c9);
  --gummy1: #ff5c6a;
  --gummy2: #5bff7d;
  --gummy3: #ffd45c;
  --gummy4: #6bc3ff;
  --gummy5: #c87bff;
  --accent: #ff8c00;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background:var(--bg-color);}

/* Custom gummy-background using SVG data-URI repeated */
/* Remove the static repeating SVG background in favor of an animated falling gummies layer */
body::before{display:block; content:''; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)); pointer-events:none}
/* Full-screen background layer for falling gummy images */
#gummy-fall-root{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;pointer-events:none;overflow:visible}

@keyframes BGSlowRotate{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}

.falling-gummy{position:absolute;will-change:transform, opacity;pointer-events:none;z-index:10000;width:48px;height:auto;opacity:0.95;transform-origin:center;backface-visibility:hidden;transform-style:preserve-3d;}
.falling-gummy img{display:block;width:100%;height:auto}

@keyframes gummyFall{
  0%{transform:translate3d(var(--drift,0px), -240vh, 0) rotate(0deg); opacity:0}
  5%{opacity:1}
  95%{opacity:1}
  100%{transform:translate3d(calc(var(--drift,0px) * 1.2), 240vh, 0) rotate(360deg); opacity:0}
}

/* Small screens: scale down amount and frequency in JS */
@media (max-width:800px){
  .falling-gummy{width:32px}
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  #gummy-fall-root{display:none !important}
}

/* Custom gummy cursor using an inline SVG data URI (small bear silhouette) */
:root{--cursor-svg:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 50%22>%3Cpath d=%22M13%203c0-2%201-3%203-3s3%201%203%203%201%229%206%206s-2%202-5%201c-3%200-6-2-6-9z%22 fill=%22%23ff5c6a%22/%3E%3C/svg%3E');}
body{cursor:var(--cursor-svg), auto;}

nav.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:rgba(255,255,255,0.6);border-bottom:2px solid rgba(255,140,0,0.2);-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);} 
nav.nav .logo{font-weight:700;color:#c9472b;text-decoration:none;font-size:20px}
nav.nav .navlinks a{margin-left:16px;text-decoration:none;color:#333;font-weight:600}

.main{padding:24px;max-width:1100px;margin:0 auto}
.hero{text-align:center;padding:4rem 1rem;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.hero h1{font-size:40px;color:var(--accent);letter-spacing:1px;margin:0}
.hero p{color:#6b6b6b;margin:0.5rem 0 1.2rem}

.video-window{display:inline-block;border-radius:14px;padding:4px;background:linear-gradient(45deg,#fff0,#ffeedc);box-shadow:0 8px 18px rgba(0,0,0,0.08)}
.video-frame{width:680px;height:382px;border-radius:10px;overflow:hidden;background:#000}
.video-frame iframe{width:100%;height:100%;border:0}

.video-fallback{display:none;padding-top:0.6rem;text-align:center}
.video-fallback a{color:var(--accent);font-weight:700;text-decoration:none}

.controls{margin-top:18px}
.controls button{background:var(--gummy1);border:none;color:white;padding:10px 16px;border-radius:999px;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,0.12);cursor:pointer}
.controls button:hover{transform:translateY(-1px)}

.gallery{margin-top:40px}
.gummies{display:flex;gap:12px;justify-content:center;align-items:center}
.gummies{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;align-items:start}
.gummies.small-margin{margin-top:8px}
.gummy{width:48px;height:64px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.2));box-shadow: inset 0 -10px 20px rgba(0,0,0,0.1);}

/* Larger gallery boxes */
.gummy-box{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;box-shadow:0 6px 18px rgba(0,0,0,0.06);border:3px solid var(--accent-color, rgba(255,255,255,0.12));transition:transform 180ms ease, box-shadow 180ms ease;cursor:pointer}
.gummy-box img{display:block;max-height:110px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,0.12));}

/* Mini gummy pieces emitted by an explosion */
.mini-gummy{position:fixed;pointer-events:none;z-index:10001;width:28px;height:auto;border-radius:6px;will-change:transform,opacity;transform-origin:center;overflow:hidden;}
.mini-gummy img{display:block;width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain}
@keyframes miniBurst{
  0%{transform:translate(-50%,-50%) translate3d(0,0,0) rotate(0deg); opacity:1}
  80%{opacity:1}
  100%{transform:translate(-50%,-50%) translate3d(var(--tx,0px), var(--ty, 120px), 0) rotate(var(--rot,360deg)); opacity:0}
}
.gummy-box figcaption{font-weight:700;color:#444;margin:4px 0 0}
.gummy-box:focus{outline:none;transform:translateY(-6px)}
.gummy-box:hover{transform:translateY(-6px)}

/* Accent color helpers */
.gummy-accent-red{--accent-color:#ff5c6a}
.gummy-accent-green{--accent-color:#5bff7d}
.gummy-accent-yellow{--accent-color:#ffd45c}
.gummy-accent-lightblue{--accent-color:#6bc3ff}
.gummy-accent-blue{--accent-color:#6bc3ff}
.gummy-accent-purple{--accent-color:#c87bff}
.gummy-accent-pink{--accent-color:#ff8fa1}
.gummy-accent-orange{--accent-color:#ffb07a}
.gummy-accent-lightgreen{--accent-color:#a8ffbf}
.gummy-accent-gold{--accent-color:#ffd8a6}
.gummy-accent-darkpurple{--accent-color:#6c2d8f}
.gummy-accent-cola{--accent-color:#b87b4a}
.gummy-red{background:linear-gradient(180deg, #ff8fa1, #ff5c6a)}
.gummy-green{background:linear-gradient(180deg, #a8ffbf, #5bff7d)}
.gummy-yellow{background:linear-gradient(180deg, #fff3b5, #ffd45c)}
.gummy-blue{background:linear-gradient(180deg, #bfe9ff, #6bc3ff)}
.gummy-purple{background:linear-gradient(180deg, #e7c5ff, #c87bff)}

.footer{padding:12px 24px;text-align:center;color:#9b9b9b}

/* Burst effect */
#burst-root{position:fixed;pointer-events:none;inset:0;z-index:1000}
.burst{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:0.9;}
@keyframes scatterBurst{
  0%{transform:scale(0.1);opacity:1}
  100%{transform:scale(2.8);opacity:0}
}

/* Layout responsiveness */
@media (max-width:800px){
  .video-frame{width:320px;height:180px}
  .hero h1{font-size:28px}
}

/* Link hover */
.navlinks a:hover{color:var(--accent)}