@font-face { font-family: 'sniglet'; src:url('../fonts/Sniglet-Regular.ttf'); }
@font-face { font-family: 'quicksand'; src:url('../fonts/Quicksand-Regular.ttf'); }

:root {
    --main-desktop-width: 1200px;
    --ui-blue: #016a80;
    --ui-lblue: #c0ecf4;
    --nav-h: 50px;
    --gap: 14px;
    --submenu-offset: 0px; /* space below the top bar */
    --radius: 10px;
    --dur: 160ms;
    --e: cubic-bezier(.2,.8,.2,1);
    --muted:#9aa4b2;
    --panel:#151922;
}

h1, h2, h3, h4, button { font-family:'sniglet'; }
h1 { font-size:1.5em; }
input::placeholder { font-style: italic; }
a { text-decoration: none; font-weight:bold; }
body, html { margin:0; padding:0; }
body {  font-family:'quicksand' }
.center { text-align: center; }
.bold { font-weight:bold; }
.justify { text-align:justify; }
.none { display:none !important; }
.shadow { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }
.divp { margin-top:1em; margin-bottom:1em; }

.home-top { background: #5cb95f; width:100%; height:728px; overflow:hidden; }
.char-very-top { background:#c9fdbb; height:0px; }
.char-top { background: #29adaf; width:100%; overflow:hidden; }
.char-top-holder { display:block; position:relative; left:50%; transform:translateX(-50%); width:2100px; max-width:160%; }
.watch-very-top { background:#74e8ec; }
.watch-top { background: #2e7e61; width:100%; overflow:hidden; }
.watch-top-holder { display:block; position:relative; left:50%; top:max(-215px, -10vw); transform:translateX(-50%); width:2990px; max-width:160%; }
.episodes-top { background: #2e7e61; width:100%; overflow-x:hidden; }
.episodes-top-holder { display:block; position:relative; left:50%; top:-50px; transform:translate(-50%, max(-610px, -27vw)); width:2990px; max-width:160%; }
.player-top { overflow:hidden; width:100%; overflow:hidden; }
.player-top-holder { display:block; position:relative; left:50%; transform:translateX(-50%); width:2990px; max-width:160%; }
.home-body0 { background:#5cb95f url('../imgs/home-grass-bg.jpg') repeat center; }
.home-body1 { background:#29adaf url('../characters/imgs/bg.jpg') repeat center; }
.home-body2 { background:#2e7e61 url('../watch/imgs/watch-bg.jpg') repeat center; }

.button { background:#a6d5ff; color:var(--ui-blue); font-size:30px; border:0; border-radius:10px; 
    padding:5px 25px 5px 25px; cursor:pointer; font-family:'sniglet'; user-select: none; }
.button:hover { background:white; color:var(--ui-blue); outline:1px solid var(--ui-blue); }

#animation_container { width:281px; height:296px; position:absolute; top:181px; left:50%; transform:translateX(-540px); }
#canvas { width:281px; height:296px; position: absolute; display: block; }
#dom_overlay_container { pointer-events:none; overflow:hidden; width:281px; height:296px; position: absolute; left: 0px; top: 0px; display: block; }
.home-bubble { position:absolute; transform:translate(-79px,-76px); z-index:2; display:block; 
  cursor:pointer; max-width:20%; }

.main-hero-img { display:block; width:2100px; height:1061px; position:relative; top:-260px; left:50%; transform:translateX(-50%); }
.char-hero-img { display:block; position:relative; width:100%; }
.player-hero-img { display:block; position:relative; width:140%; left:-21%; }
.watch-hero-img { display:block; position:relative; width:100%; }
.episodes-hero-img { display:block; position:relative; width:100%; }
.main-holder { max-width:var(--main-desktop-width); margin:0 auto 0 auto; width:calc(100% - 80px); }
.char-top-fix { margin-top:-70px; position:relative; }
.main-row { display:flex; gap:20px; justify-content:space-between; flex-wrap:nowrap; align-items:stretch; width:100%; }
.main-single { display:flex; gap:20px; justify-content: space-between; align-items:stretch; width:100%; }
.main-box { border:0; border-radius:10px; background:white; padding:30px; position:relative;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); margin:0 auto 0 auto; }
.home-about { background: #f6f195; flex:0 1 750px; }
.home-about-title { margin-top:30px; text-align:center; }
.home-about-emblem { margin:-60px 30px 0 0; float:left; max-width:60vw; width:50%; }
.home-box-img { position:absolute; transform: translate(-50%, -50%); pointer-events:none; z-index:1; }
.home-box-star { 
    position:absolute;
    width:28px; height:28px;
    transform:translate(-50%,-50%) rotate(var(--rot)) scale(var(--scale));
    filter: brightness(var(--tw)) drop-shadow(0 0 calc(var(--tw)*4px) rgba(255,255,200,0.7));    
    pointer-events:none;

    --spin-burst-dur: 6s;
    --pulse-dur: 2s;
    --twinkle-dur: 1.8s;
    --twinkle-delay: 0s;

    animation:
      spin-burst var(--spin-burst-dur) linear infinite,
      pulse var(--pulse-dur) ease-in-out infinite,
      twinkle var(--twinkle-dur) ease-in-out var(--twinkle-delay) infinite;
}
@keyframes spin-burst {
  0%   { --rot: 0deg; }
  20%  { --rot: 360deg; } /* one spin */
  50%  { --rot: 360deg; } /* pause */
  100% { --rot: 360deg; }
}

@keyframes pulse { 0%,100% { --scale:1.0; } 50% { --scale:1.05; } }
@keyframes twinkle { 
0%,100% { --tw: 1.10; }
50%     { --tw: 1.15; }
}
@property --rot {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@property --scale {
syntax: '<number>';
initial-value: 1;
inherits: false;
}
@property --tw {
syntax: '<number>';
initial-value: 1;
inherits: false;
}


.home-box-star1 { width:86px; height:89px; top:5%; right:-25px; --spin-burst-dur:6s; --twinkle-delay:.2s; }
.home-box-star2 { width:57px; height:57px; top:-1%; right:92px; --spin-burst-dur:8s; --twinkle-delay:.7s; }
.home-callout { flex: 0 1 400px; }
.home-box-tab1 { width:63px; height:35px; top:0%; left:20%; }
.home-box-tab2 { width:64px; height:40px; top:0%; right:0%; }
.home-more-button { position:relative; z-index:2; }
.home-box-ship { width:33%; max-width:128px; height:auto; bottom:-32%; right:-20%; }
.home-clouds { margin:40px auto 20px auto; color: var(--ui-blue); line-height:120px;
    background-image:url('../imgs/home-clouds-end.png'), url('../imgs/home-clouds-end.png'), url('../imgs/home-clouds-middle.png');
    background-position:left center, right center, center 30%;
    background-size:auto, auto, 84% 80%;
    background-repeat:no-repeat, no-repeat, no-repeat;
    text-align:center; height:120px; width:100%; font-family:'sniglet'; font-size:48px; }
.home-char { flex:0 1 360px; padding:0; max-width:360px; }
.home-char-image-bg { width:100%; height:300px; max-width:360px; background-position: center center; border-radius:10px 10px 0 0; }
.home-char-image { margin:auto; display:block; max-height:100%; transform:translateY(100%); opacity:0; }
.home-char-info { margin:20px; } 
.home-char-info > h2 { text-align: center; }
.bounce-in { animation: bounceIn 1s ease forwards; }
@keyframes bounceIn { 
  0% { transform: translateY(100%) scale(0.5); display:block; margin:auto; opacity: 0; }
  60% { transform: translateY(0%) scale(1.0); display:block; margin:auto; opacity: 1; }
  80% { transform: translateY(2%) scale(1.02); display:block; margin:auto; }
  100% { transform: translateY(0) scale(1); opacity:1; display:block; margin:auto; }
}

.main-youtube { width: 100%; aspect-ratio: 16 / 9; border-radius:10px; }
.home-vid-box { width:100%; max-width:1000px; padding-top:0px; }
.player-vid-box { width:100%; max-width:1000px; padding:10px;  }
.home-spacer { height:50px; }
.home-couch-holder { display:flex; min-width:60%; padding-top:0px; }
.home-couch { margin:-135px 0 -90px -96px; width:388px; height:388px; }
.home-couch-logos { display:flex; justify-content: center; align-items:center; gap:30px; margin:0px 50px 0px 50px; flex-wrap: wrap;  }
.home-where-column { width:100%; }

.char-hero-toopy { position:absolute; top:23%; left:34%; width:10.5%; }
.char-hero-binoo { position:absolute; top:28%; left:64%; width:4.5%; }
.char-hero-chest { position:absolute; top:59%; right:21%; width:14%; }
.char-hero-star0 { position:absolute; top:49%; left:16.4%; width:6%; }
.char-hero-star1 { position:absolute; top:67%; left:14.5%; width:6%; }
.char-hero-star2 { position:absolute; top:79%; left:18.3%; width:6%; }
.char-hero-star3 { position:absolute; top:9%; left:39.5%; width:6%; }
.char-hero-star4 { position:absolute; top:16%; right:45.4%; width:6%; }
.char-hero-star5 { position:absolute; top:40%; right:22%; width:6%; }
.char-hero-star6 { position:absolute; top:44.2%; right:16%; width:6%; }
.char-hero-star7 { position:absolute; top:63%; right:15.3%; width:6%; }
.char-hero-star8 { position:absolute; top:90%; right:19.4%; width:4%; }
.char-float { animation: slightFloat 2.0s ease-in-out infinite alternate; cursor:pointer; }
.char-float2 { animation: slightFloat2 1.8s ease-in-out infinite alternate; cursor:pointer; }
@keyframes slightFloat { 0% { transform: translateY(0); /* Start position */ }
  100% { transform: translateY(-20px); /* Move up 10 pixels */ }}
@keyframes slightFloat2 { 0% { transform: translateY(0) scaleX(-1); /* Start position */ }
  100% { transform: translateY(-20px) scaleX(-1); /* Move up 10 pixels */ }}
.star-pulsate { display: inline-block; transform-origin: center center; animation: star-pulse 3.2s ease-in-out infinite; will-change: transform, opacity; }
@keyframes star-pulse { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.0); opacity: 1.0; } 100% { transform: scale(0.5); opacity: 0; } }
.char-items { display:flex; flex-direction:row; flex-wrap:wrap; margin:0 auto 0 auto; justify-content:space-around; }
.char-item { display:flex;  justify-content:center; margin-bottom:30px; }
.char-item-group { display:flex; justify-content:center; align-items:center; position:absolute; width:380px; height:425px; }
.char-item-bg { position:absolute; width:360px; }
.char-item-frame { position:absolute; width:380px; height:425px; }
.char-item-char { position:absolute; }
.char-item-post { background:#f6f195; border-radius:10px; width:320px; height:200px; margin-top:440px; 
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); text-align:center; padding:0 20px 20px 20px; }
.char-item-post-tall { height:365px; }
.char-item-c {  background:white; border-radius:10px; margin-bottom:50px; display:flex; 
  justify-content:center; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); width:338px; height:466px; }
.char-tab-a { width:63px; height:35px; position:absolute; margin:-20px 224px 0 0; }
.char-tab-b { width:64px; height:40px; position:absolute; margin:-20px 0 0 225px; }
.char-item-group-c { height:324px; }
.char-item-bg-c { width:280px; height:240px; }
.char-item-post-c { width:320px; height:140px; margin-top:280px; text-align:center; }

.watch-couch-holder { position:absolute; width:100%; height:100%; left:50%; transform:translateX(-50%); top:0%; max-width:2100px; }
.watch-seating { position:absolute; left:21%; top:35%; width:35%; }
.watch-couch-toopie { position:absolute; left:26%; top:35%; width:8%; }
.watch-couch-binoo { position:absolute; left:34%; top:40%; width:4%; }
.watch-chair-patchy { position:absolute; left:44.5%; top:39%; width:3%; }
.watch-all-seasons { display:flex; margin:max(-34vw, -590px) auto 100px auto; position:relative; 
  justify-content:space-around; max-width:1200px; flex-wrap: wrap; gap:20px; }
.watch-season-box { background:white; border-radius:10px; width:360px; height:510px; }
.watch-season-link { all:unset; cursor:pointer; transition: transform 0.1s ease-in-out; }
.watch-season-link:hover { transform: scale(1.04); }
.watch-season-title { text-align:center; margin:12px auto 0px auto; }
.watch-season-desc { padding:0 20px 0 20px; }
.watch-season-button { display:block; margin-left:auto; margin-right:auto; }
.watch-stage-holder { position:absolute; width:100%; height:100%; left:50%; transform:translateX(-50%); top:0%; max-width:2192px; }
.watch-stage-toopie { position:absolute; left:49%; top:58%; width:8%; }
.watch-stage-binoo { position:absolute; left:60%; top:65%; width:6.4%; }
.episodes-hero-title { transform:translateY(max(-914px, -43vw)); max-width:1250px; }
.episodes-grid { display:flex; justify-content: space-around; flex-wrap: wrap; gap:20px; 
  margin:max(-42vw, -888px) auto 100px auto; position:relative; }
.episodes-box { background:white; border-radius:10px; width:380px; height:350px; overflow:hidden; }
.episodes-title { margin:10px 20px 0 20px; }
.episodes-desc { margin:5px 20px 0 20px; }
.episodes-stage-holder { position:absolute; width:100%; height:100%; left:50%; transform:translateX(-50%); top:0%; }
.yt-play { position:absolute; width:calc(100% - 60px); cursor:pointer; }
.player-vid-holder { margin-top: max(-86vw, -1730px); position: relative; }
.player-desc-box { background:#f6f195; border-radius:10px; max-width:min(600px, calc(100% - 76px)); 
  margin:80px auto 0 auto; padding:20px; }
.player-back-box { background:#f5fcdb;  border-radius:10px; max-width:min(800px, calc(100% - 76px)); 
  margin:80px auto 100px auto; padding:20px; position:relative; height:250px; }
.player-back-thumb { position:absolute; height:214px; top:-10px; right:10px; border-radius:10px; }
.player-couch { height:100%; position:absolute; left:-30px; bottom:-50px;  }
.player-back-button { position:absolute; right:10%; bottom:20px; }
.lazy-thumb { opacity: 0; transform: translateY(12px); will-change: opacity, transform; }
.lazy-thumb.is-visible { animation: fadeInUp 520ms ease-out both; animation-delay: var(--delay, 0ms); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.footer { color:white; }
.footer-top0 { background:url('../imgs/footer-grass.png'); height:38px;  }
.footer-top1 { background:url('../imgs/footer-curved.png'); height:38px; }
.footer-top2 { background:url('../imgs/footer-grass2.png'); height:38px; }
.footer-body0 { background:#2b732e; }
.footer-body1 { background:#006b7d; }
.footer-body2 { background:#004d48; }
.footer-row { display:flex; justify-content: space-around; padding:50px 30px 30px 30px; gap:40px; }
.footer-holder { padding:20px; flex-basis:30%; }
.footer-social-items { display:flex; gap:20px; justify-content: center; align-items: center; }
.footer-social-item { transition: transform 0.3s ease;  }
.footer-social-item:hover { transform: scale(1.08); }
.footer-news-box { flex-basis:60%; background:#eafead; color:black; border-radius:10px; padding:20px; position:relative; margin-right:50px; }
.footer-news-wagon { position:absolute; right:20px; top:-46px; width:16vw; max-width:312px; min-width:200px; }
.footer-news-heading { width:50%; min-width:170px; }
.footer-news-email { margin:0px 0 20px 0; width:36%; height:24px; font-size:18px; min-width:250px; }
.mc-field-group { font-size:18px; }
#mce-responses { color:red; background:none; }
.footer-link { color:white; }
.footer-link:hover { text-decoration: underline;  }

#cookie-banner { position:fixed; bottom:0; left:0; right:0; background-color:white; z-index:99999;
  padding:0px 20px 20px 20px; font-size:24px; display:none; opacity:0.9; text-align:center; }
#cookie-settings { position:fixed; top:0; left:-320px; background-color:white; z-index:99999; opacity:0.9;
  height:100%; width:280px; padding:20px; display:none;
}
.cookie-x { float:right; }
#cookie-settings { font-size:18px; }
#ck-title { font-size:28px; }

.privacy-holder { background:#f6f195; top:150px; margin-bottom:200px; max-width:800px; }

@media (min-width: 1600px) {
  .player-hero-img { width:100%; left:0; }
  .player-vid-holder { margin-top:-1200px; }
}

@media (max-width: 1066px) {
  .main-hero-img { transform:translateX(-40%); }
  #animation_container { transform:translateX(-330px); }
  .watch-top-holder { top:0px; }
  .watch-very-top { height:100px; }
  .watch-all-seasons { margin-top:-150px; }
  .player-vid-box { max-width:80vw; }
}


@media (max-width: 961px) {
  .main-row-top { flex-direction:column; }
  .main-box-top { max-width:518px; }
  .main-box { flex:1 1 auto; width: calc(100% - 100px); }
  .home-box-ship { width:22%; right:-14%; bottom:-50%; }
  .footer-news-wagon { min-width:100px; width:34%; right:0px; top:-29px; } 
}


@media (max-width: 769px) {
    .home-clouds { font-size:36px; height:80px; line-height:80px; }
    #animation_container { top:76px; transform:translateX(-295px) scale(0.38); }
    .main-hero-img { top:0px; width:800px; height:auto; transform:translateX(-50%); }
    .home-top { height:400px; }
    .main-holder { width:100%; }
    .main-row, .footer-row { flex-direction:column; }
    .main-box { flex:1 1 auto; width: calc(100% - 100px); }
    .footer-row { flex:1 1 auto; width: calc(100% - 20px); padding:0; }
    .footer-news-box { margin:20px 10px 20px 10px; }
    .home-about-emblem { width:65%; max-width:250px; float:none; margin:-13px auto 0 0px; display:block;  }
    .home-couch { display:none; }
    .home-box-ship { bottom:-17vw; }
    .home-vid-box, .home-couch-holdern .player-vid-box { margin-left:20px; margin-right:20px; }
    .player-vid-box { width: 99vw; }
    .char-very-top { height:80px; }
    .watch-all-seasons { margin-top:-50px; }
    .episodes-top-holder { margin-top:100px; }
    .episodes-box { max-width:calc(100% - 40px); margin:auto; }
    .player-couch { display:none; }
    .player-back-thumb { right:50%; transform:translateX(50%); }
    .player-back-button { left:10%; right:10%; }
}


/* If user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .star { animation: none; }
  .lazy-thumb { opacity: 1; transform: none; }
  .lazy-thumb.is-visible { animation: none; }
}