/* ==========================================================================
   ELLIE'S WORLD — design system for GoodLayers Infinite
   --------------------------------------------------------------------------
   HOW THIS FILE PLAYS WITH GOODLAYERS
   - Everything is namespaced .ew- ; no bare-tag or gdlr-core overrides
     except the two documented GL button recipes at the bottom.
   - Section PADDING belongs to GoodLayers (wrapper padding fields).
     This file never sets vertical section padding.
   - Section BACKGROUNDS live here, keyed to wrapper extra-classes
     (ew-hero, ew-stories, ew-art, ew-songs, ew-adventures, ew-about,
     ew-explore). Set the GL wrapper background-type to "color" with a
     matching flat fallback color; the class supplies the gradient/texture.
   - Breakpoints: 999px / 767px to match Infinite's grid collapse.
   ========================================================================== */

:root{
  --ew-paper:#FFF7EC;
  --ew-paper-2:#FFF3E3;
  --ew-ink:#372E5C;
  --ew-ink-soft:#7A72A3;
  --ew-coral:#FF6F61;
  --ew-tangerine:#FFA45C;
  --ew-sunbeam:#FFC94D;
  --ew-mint:#7FDCB6;
  --ew-lagoon:#2EC4B6;
  --ew-sky:#6EC9F2;
  --ew-lavender:#A78BE0;
  --ew-pink:#FFAEC9;
  --ew-twilight:#2B2557;
  --ew-twilight-2:#1F1A44;
  --ew-disp:'Grandstander','Nunito',sans-serif;
  --ew-hand:'Shantell Sans',cursive;
  --ew-body:'Nunito',sans-serif;
  --ew-shadow-soft:0 18px 40px -18px rgba(55,46,92,.28);
}

/* ---------- shared bits ---------- */
.ew-empty{
  font-family:var(--ew-hand);font-weight:700;font-size:1.15rem;
  color:var(--ew-ink-soft);text-align:center;padding:30px 0;
}
.ew-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.22,.9,.3,1.15)}
.ew-reveal.ew-in{opacity:1;transform:none}

/* crayon highlight — usable inside GL title HTML:
   Featured <span class="ew-hl ew-hl-coral">Stories</span>              */
.ew-hl{padding:0 .1em;border-radius:8px;
  background-image:linear-gradient(transparent 55%,var(--ew-hl-c) 55%,var(--ew-hl-c) 94%,transparent 94%);}
.ew-hl-coral{--ew-hl-c:rgba(255,111,97,.38)}
.ew-hl-mint{--ew-hl-c:rgba(127,220,182,.5)}
.ew-hl-lavender{--ew-hl-c:rgba(167,139,224,.4)}
.ew-hl-sunbeam{--ew-hl-c:rgba(255,201,77,.55)}
.ew-hl-sky{--ew-hl-c:rgba(110,201,242,.45)}

/* rainbow gradient word — usable inside GL title HTML:
   Ellie's <span class="ew-rainbow-text">World</span>                   */
.ew-rainbow-text{
  background:linear-gradient(92deg,var(--ew-coral),var(--ew-tangerine),var(--ew-sunbeam),var(--ew-lagoon),var(--ew-sky),var(--ew-lavender),var(--ew-coral));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ewShiftBg 9s linear infinite;
}

/* ==========================================================================
   SECTION WRAPPER CLASSES — put these in the GL wrapper "extra class" field
   ========================================================================== */
.ew-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#A9DDFB 0%,#CFEAFB 32%,#FFE9EC 68%,var(--ew-paper) 100%) !important;
}
.ew-stories,.ew-adventures{
  background-color:var(--ew-paper) !important;
  background-image:radial-gradient(rgba(55,46,92,.07) 1.5px,transparent 1.6px) !important;
  background-size:26px 26px !important;
}
.ew-art{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ew-paper) 0%,#EAF7F1 30%,#E4F4F5 78%,#FBEFE4 100%) !important;
}
.ew-songs{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FBEFE4 0%,#FFE8D6 45%,#F4E3F6 100%) !important;
}
.ew-about{background:var(--ew-paper) !important;overflow:hidden}
.ew-explore{
  background:linear-gradient(180deg,var(--ew-paper) 0%,#EAF3FD 40%,#F0ECFB 80%,var(--ew-paper) 100%) !important;
}
/* !important is limited to backgrounds above: GL prints wrapper background
   as an inline style, and these classes must win over it. Everything else
   in this file works on normal specificity. */

/* ==========================================================================
   [ew_sky] — hero layers (wrapper needs .ew-hero)
   ========================================================================== */
.ew-sky{position:absolute;inset:0;pointer-events:none}
.ew-sky-layer{position:absolute;inset:0;will-change:transform}
.ew-sun{position:absolute;top:7%;right:8%;width:170px}
.ew-sun .ew-rays{transform-box:fill-box;transform-origin:center;animation:ewSpinSlow 46s linear infinite}
.ew-cloud{position:absolute;filter:drop-shadow(0 16px 26px rgba(96,150,214,.28))}
.ew-cloud svg{width:100%;height:auto;opacity:.97}
.ew-cloud-a{top:14%;left:4%;width:230px;animation:ewDrift 16s ease-in-out infinite}
.ew-cloud-b{top:8%;left:55%;width:150px;opacity:.85;animation:ewDrift 22s ease-in-out infinite reverse}
.ew-cloud-c{bottom:24%;right:3%;width:190px;animation:ewDrift 19s ease-in-out infinite}
.ew-cloud-d{bottom:30%;left:-30px;width:130px;opacity:.8;animation:ewDrift 24s ease-in-out infinite reverse}
.ew-plane-wrap{position:absolute;top:26%;left:-320px;width:300px;animation:ewFly 16s cubic-bezier(.45,.05,.55,.95) infinite}
.ew-plane-trail{position:absolute;top:34px;left:0;width:210px}
.ew-plane{position:absolute;top:0;right:0;width:86px;animation:ewBob 3s ease-in-out infinite}
.ew-sparkle{position:absolute;width:26px;animation:ewTwinkle 3.2s ease-in-out infinite}
.ew-sp-1{top:22%;left:24%}
.ew-sp-2{top:14%;right:30%;animation-delay:1.1s;width:18px}
.ew-sp-3{top:52%;left:9%;animation-delay:2s}
.ew-sp-4{top:44%;right:14%;animation-delay:.6s;width:20px}
.ew-sticker{position:absolute;top:31%;right:11%;width:118px}
.ew-sticker svg{animation:ewSpinSlow 26s linear infinite}
.ew-sticker span{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--ew-disp);font-weight:900;font-size:.86rem;line-height:1.05;
  color:#fff;transform:rotate(-9deg);
}
.ew-sky-rainbow{
  position:absolute;left:50%;top:16%;transform:translateX(-50%);
  width:min(640px,86vw);opacity:.6;
}

/* ==========================================================================
   [ew_ticker]
   ========================================================================== */
.ew-tape{
  position:relative;z-index:5;
  transform:rotate(-1.5deg);width:104vw;margin-left:-2vw;margin-top:-40px;
  background:#fff;border-top:2.5px solid rgba(55,46,92,.1);border-bottom:2.5px solid rgba(55,46,92,.1);
  box-shadow:0 14px 30px -16px rgba(55,46,92,.25);
  overflow:hidden;padding:16px 0;
}
.ew-tape-track{display:flex;align-items:center;gap:38px;width:max-content;animation:ewMarquee 30s linear infinite}
.ew-t-word{font-family:var(--ew-disp);font-weight:800;font-size:1.35rem;white-space:nowrap}
.ew-t-star{width:20px;flex:none}
.ew-c-coral{color:var(--ew-coral)}.ew-c-tangerine{color:var(--ew-tangerine)}
.ew-c-sunbeam{color:#EBA612}.ew-c-lagoon{color:var(--ew-lagoon)}
.ew-c-sky{color:#3FA9E0}.ew-c-lavender{color:var(--ew-lavender)}.ew-c-pink{color:#F27BA4}

/* ==========================================================================
   [ew_books]
   ========================================================================== */
.ew-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:start}
.ew-book{
  position:relative;background:#fff;border-radius:14px 24px 24px 14px;
  border:2.5px solid rgba(55,46,92,.09);
  padding:16px 16px 24px;box-shadow:var(--ew-shadow-soft);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .38s;
}
.ew-b1{transform:rotate(-2.6deg)}
.ew-b2{transform:rotate(1.8deg);margin-top:38px}
.ew-b3{transform:rotate(-1.4deg);margin-top:14px}
.ew-book::before{
  content:"";position:absolute;left:9px;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:rgba(55,46,92,.12);
}
.ew-book:hover{transform:rotate(0deg) translateY(-12px);box-shadow:0 34px 54px -22px rgba(55,46,92,.4)}
.ew-ribbon{
  position:absolute;top:-10px;right:30px;width:30px;height:72px;z-index:2;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);
  box-shadow:0 6px 12px -4px rgba(55,46,92,.3);
  transition:transform .3s;transform-origin:top center;
}
.ew-book:hover .ew-ribbon{transform:rotate(-5deg)}
.ew-r-coral{background:var(--ew-coral)}
.ew-r-sunbeam{background:var(--ew-sunbeam)}
.ew-r-lagoon{background:var(--ew-lagoon)}
.ew-pop{position:absolute;top:-16px;left:-14px;width:34px;opacity:0;transform:scale(.3) rotate(-30deg);transition:.35s cubic-bezier(.34,1.56,.64,1)}
.ew-book:hover .ew-pop{opacity:1;transform:scale(1) rotate(0)}
.ew-cover{display:block;border-radius:12px;overflow:hidden;margin:2px 2px 18px;border:2px solid rgba(55,46,92,.08)}
.ew-cover img,.ew-cover svg{width:100%;height:auto;display:block;aspect-ratio:400/260;object-fit:cover}
.ew-book h3{font-family:var(--ew-disp);font-weight:800;font-size:1.45rem;line-height:1.12;padding:0 8px;margin:0}
.ew-book h3 a{color:var(--ew-ink);text-decoration:none}
.ew-book h3 a:hover{color:var(--ew-coral)}
.ew-teaser{padding:8px 8px 0;margin:0;font-family:var(--ew-body);font-size:.98rem;font-weight:600;color:var(--ew-ink-soft);line-height:1.6}
.ew-book-meta{display:flex;gap:10px;padding:14px 8px 0;flex-wrap:wrap}
.ew-book-meta span{
  font-family:var(--ew-disp);font-weight:700;font-size:.72rem;letter-spacing:.06em;
  padding:.35em .95em;border-radius:999px;background:var(--ew-paper-2);color:var(--ew-ink-soft);
  border:1.5px solid rgba(55,46,92,.1);
}
.ew-book-link{
  display:inline-block;margin:16px 8px 0;text-decoration:none;
  font-family:var(--ew-hand);font-weight:700;font-size:1.1rem;color:var(--ew-coral);
}
.ew-book-link i{font-style:normal;display:inline-block;transition:transform .25s}
.ew-book:hover .ew-book-link i{transform:translateX(6px)}
.ew-shelf-line{width:100%;margin-top:44px;display:block}

/* ==========================================================================
   [ew_artwall]
   ========================================================================== */
.ew-art-grid{columns:3;column-gap:30px}
.ew-art-piece{
  position:relative;break-inside:avoid;margin:0 0 34px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ew-a1{transform:rotate(-2deg)}.ew-a2{transform:rotate(1.9deg)}
.ew-a3{transform:rotate(-1.2deg)}.ew-a4{transform:rotate(2.2deg)}
.ew-a5{transform:rotate(-1.8deg)}.ew-a6{transform:rotate(1.4deg)}
.ew-art-piece:hover{transform:rotate(0deg) scale(1.03);z-index:3}
.ew-art-mat{display:block;background:#fff;padding:12px;border-radius:10px;box-shadow:var(--ew-shadow-soft)}
.ew-art-mat img{border-radius:6px;width:100%;height:auto;display:block}
.ew-washi{
  position:absolute;top:-13px;left:50%;width:98px;height:27px;z-index:2;
  transform:translateX(-50%) rotate(-4deg);opacity:.88;border-radius:2px;
  box-shadow:0 3px 6px -2px rgba(55,46,92,.25);
}
.ew-w-coral{background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--ew-coral)}
.ew-w-sunbeam{background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--ew-sunbeam)}
.ew-w-lagoon{background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--ew-lagoon)}
.ew-w-lavender{background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--ew-lavender)}
.ew-w-pink{background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--ew-pink)}
.ew-w-sky{background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--ew-sky)}
.ew-art-piece figcaption{margin-top:12px;font-family:var(--ew-hand);font-weight:700;font-size:1.04rem;color:var(--ew-ink)}
.ew-art-piece figcaption span{display:block;font-family:var(--ew-body);font-weight:700;font-size:.78rem;color:var(--ew-ink-soft)}

/* ==========================================================================
   [ew_cassettes] — .is-playing drives reels + EQ, .is-on swaps play/pause
   ========================================================================== */
.ew-songs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.ew-cassette{
  border-radius:22px;padding:20px;color:#fff;
  border:3px solid rgba(255,255,255,.45);
  box-shadow:var(--ew-shadow-soft);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;
}
.ew-cs1{background:linear-gradient(150deg,var(--ew-coral),var(--ew-tangerine));transform:rotate(-1.6deg)}
.ew-cs2{background:linear-gradient(150deg,var(--ew-lavender),var(--ew-sky));transform:rotate(1.3deg)}
.ew-cs3{background:linear-gradient(150deg,var(--ew-lagoon),var(--ew-mint));transform:rotate(-1deg)}
.ew-cassette:hover,.ew-cassette.is-playing{transform:rotate(0) translateY(-10px);box-shadow:0 30px 48px -20px rgba(55,46,92,.42)}
.ew-cass-label{background:#FFFDF6;border-radius:14px;padding:16px 18px 18px;color:var(--ew-ink);box-shadow:inset 0 0 0 2px rgba(55,46,92,.07)}
.ew-side{font-family:var(--ew-disp);font-weight:800;font-size:.66rem;letter-spacing:.18em;color:var(--ew-ink-soft)}
.ew-cass-label h3{font-family:var(--ew-hand);font-weight:700;font-size:1.32rem;line-height:1.15;margin:4px 0 0}
.ew-cass-label h3 a{color:var(--ew-ink);text-decoration:none}
.ew-cass-label h3 a:hover{color:var(--ew-coral)}
.ew-reels{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.ew-reel{
  flex:none;width:38px;height:38px;border-radius:50%;
  border:6px solid var(--ew-ink);position:relative;box-sizing:border-box;
}
.ew-reel::after{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(55,46,92,.18)}
.is-playing .ew-reel{animation:ewSpinSlow 1.8s linear infinite}
.ew-eq{display:flex;gap:5px;height:30px;align-items:flex-end;flex:1;justify-content:center}
.ew-eq i{width:6px;height:100%;border-radius:4px;transform-origin:bottom;transform:scaleY(.28);transition:transform .3s}
.ew-cs1 .ew-eq i{background:var(--ew-coral)}
.ew-cs2 .ew-eq i{background:var(--ew-lavender)}
.ew-cs3 .ew-eq i{background:var(--ew-lagoon)}
.is-playing .ew-eq i{animation:ewEq 1.15s ease-in-out infinite}
.ew-eq i:nth-child(1){animation-delay:0s}
.ew-eq i:nth-child(2){animation-delay:-.35s}
.ew-eq i:nth-child(3){animation-delay:-.7s}
.ew-eq i:nth-child(4){animation-delay:-.15s}
.ew-eq i:nth-child(5){animation-delay:-.55s}
.ew-cass-foot{display:flex;align-items:center;gap:14px;margin-top:18px}
.ew-play{
  flex:none;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 10px 20px -6px rgba(55,46,92,.35);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);padding:0;
}
.ew-play:hover{transform:scale(1.14) rotate(8deg)}
.ew-play svg{width:18px;display:block}
.ew-play .ew-ic-play{margin-left:3px}
.ew-play .ew-ic-pause{display:none;margin-left:0}
.ew-play.is-on .ew-ic-play{display:none}
.ew-play.is-on .ew-ic-pause{display:block}
.ew-dur{font-family:var(--ew-disp);font-weight:800;font-size:.8rem;background:rgba(255,255,255,.28);padding:.35em .9em;border-radius:999px}
.ew-mood{font-family:var(--ew-hand);font-weight:500;font-size:.92rem;line-height:1.3;opacity:.95}

/* ==========================================================================
   [ew_timeline]
   ========================================================================== */
.ew-timeline{position:relative;max-width:900px;margin:0 auto}
.ew-timeline::before{
  content:"";position:absolute;left:50%;top:10px;bottom:10px;width:0;
  border-left:4px dotted rgba(55,46,92,.28);transform:translateX(-2px);
}
.ew-tl-item{
  position:relative;width:calc(50% - 48px);
  background:#fff;border-radius:20px;padding:22px 26px 24px;
  border:2.5px solid rgba(55,46,92,.08);box-shadow:var(--ew-shadow-soft);
  margin-bottom:38px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ew-tl-item:hover{transform:translateY(-6px) rotate(-.6deg)}
.ew-tl-item:nth-child(even){margin-left:auto}
.ew-tl-item:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
.ew-tl-item::before{
  content:"";position:absolute;top:26px;width:18px;height:18px;border-radius:50%;
  background:var(--ew-dot,var(--ew-coral));border:5px solid var(--ew-paper);
  box-shadow:0 0 0 3px var(--ew-dot,var(--ew-coral));
}
.ew-tl-item:nth-child(odd)::before{right:-62px}
.ew-tl-item:nth-child(even)::before{left:-62px}
.ew-dot-stories{--ew-dot:var(--ew-coral)}
.ew-dot-drawings{--ew-dot:var(--ew-lagoon)}
.ew-dot-songs{--ew-dot:var(--ew-lavender)}
.ew-dot-ideas{--ew-dot:var(--ew-sunbeam)}
.ew-dot-fun-stuff{--ew-dot:var(--ew-pink)}
.ew-dot-projects{--ew-dot:var(--ew-sky)}
.ew-tl-badge{
  display:inline-block;font-family:var(--ew-disp);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:var(--ew-dot,var(--ew-coral));padding:.4em 1em;border-radius:999px;
}
.ew-dot-ideas .ew-tl-badge{color:var(--ew-ink)}
.ew-tl-date{font-family:var(--ew-hand);font-weight:500;font-size:.92rem;color:var(--ew-ink-soft);margin-left:10px}
.ew-tl-item h3{font-family:var(--ew-disp);font-weight:800;font-size:1.28rem;line-height:1.15;margin:.55em 0 .3em}
.ew-tl-item h3 a{color:var(--ew-ink);text-decoration:none}
.ew-tl-item h3 a:hover{color:var(--ew-coral)}
.ew-tl-item p{font-family:var(--ew-body);font-size:.96rem;color:var(--ew-ink-soft);font-weight:600;margin:0;line-height:1.6}

/* ==========================================================================
   [ew_doors]
   ========================================================================== */
.ew-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.ew-door{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  aspect-ratio:3/3.9;border-radius:170px 170px 26px 26px;
  padding:0 22px 30px;text-decoration:none;color:#fff;overflow:hidden;
  box-shadow:var(--ew-shadow-soft);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s;
}
.ew-door::before{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:3px dashed rgba(255,255,255,.5);border-radius:160px 160px 18px 18px;
  transition:border-color .3s;
}
.ew-door:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 32px 52px -20px rgba(55,46,92,.42)}
.ew-door:hover::before{border-color:rgba(255,255,255,.85)}
.ew-d-stories{background:linear-gradient(165deg,var(--ew-coral),var(--ew-tangerine))}
.ew-d-drawings{background:linear-gradient(165deg,var(--ew-lagoon),var(--ew-mint))}
.ew-d-songs{background:linear-gradient(165deg,var(--ew-sky),var(--ew-lavender))}
.ew-d-ideas{background:linear-gradient(165deg,var(--ew-sunbeam),var(--ew-tangerine))}
.ew-d-fun-stuff{background:linear-gradient(165deg,var(--ew-pink),var(--ew-coral))}
.ew-d-projects{background:linear-gradient(165deg,var(--ew-lavender),#7B6BD9)}
.ew-door-icon{margin-top:24%;margin-bottom:auto;width:66px;transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.ew-door-icon svg{width:100%;height:auto;display:block}
.ew-door:hover .ew-door-icon{transform:translateY(-10px) rotate(-7deg) scale(1.12)}
.ew-door-name{font-family:var(--ew-disp);font-weight:900;font-size:1.6rem;text-shadow:0 2px 6px rgba(55,46,92,.22)}
.ew-door-hint{font-family:var(--ew-hand);font-weight:500;font-size:.95rem;opacity:.94;margin-top:2px}
.ew-door-go{
  margin-top:14px;font-family:var(--ew-disp);font-weight:800;font-size:.82rem;
  background:rgba(255,255,255,.24);padding:.5em 1.2em;border-radius:999px;
  transition:background .3s;
}
.ew-door:hover .ew-door-go{background:rgba(255,255,255,.4)}

/* ==========================================================================
   GL BUTTON RECIPES — put the class in the GL button "extra class" field
   and LEAVE ALL GL COLOR FIELDS EMPTY on that button.
   ========================================================================== */
.gdlr-core-button.ew-btn-rainbow{
  font-family:var(--ew-disp);font-weight:800;border-radius:999px;border:none;
  color:#fff;text-shadow:0 1px 3px rgba(55,46,92,.28);
  background:linear-gradient(100deg,var(--ew-coral),var(--ew-tangerine),var(--ew-sunbeam),var(--ew-lagoon),var(--ew-sky),var(--ew-lavender));
  background-size:240% 100%;
  animation:ewShiftBg 10s linear infinite alternate;
  box-shadow:0 14px 26px -10px rgba(255,111,97,.55);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s;
}
.gdlr-core-button.ew-btn-rainbow:hover{
  transform:translateY(-4px) rotate(-1.2deg);
  box-shadow:0 22px 36px -12px rgba(167,139,224,.6);
}
.gdlr-core-button.ew-btn-ghost{
  font-family:var(--ew-disp);font-weight:800;border-radius:999px;
  color:var(--ew-ink);background:#fff;border:3px solid var(--ew-ink);
  box-shadow:6px 6px 0 rgba(55,46,92,.14);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s;
}
.gdlr-core-button.ew-btn-ghost:hover{
  transform:translateY(-4px) rotate(1deg);
  box-shadow:8px 10px 0 rgba(55,46,92,.18);
  color:var(--ew-ink);background:#fff;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes ewShiftBg{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes ewSpinSlow{to{transform:rotate(360deg)}}
@keyframes ewDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(46px)}}
@keyframes ewFloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ewBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ewTwinkle{0%,100%{opacity:.25;transform:scale(.72) rotate(0deg)}50%{opacity:1;transform:scale(1.12) rotate(18deg)}}
@keyframes ewMarquee{to{transform:translateX(-50%)}}
@keyframes ewEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes ewFly{
  0%{transform:translate(0,0) rotate(6deg)}
  48%{transform:translate(58vw,-9vh) rotate(-5deg)}
  100%{transform:translate(130vw,3vh) rotate(7deg)}
}

/* ==========================================================================
   RESPONSIVE — 999 / 767 to match Infinite's grid collapse
   ========================================================================== */
@media (max-width:999px){
  .ew-shelf{gap:30px}
  .ew-doors{gap:26px;grid-template-columns:repeat(2,1fr)}
  .ew-songs-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .ew-cs1{transform:rotate(-1deg)}.ew-cs2{transform:rotate(1deg)}.ew-cs3{transform:rotate(-.8deg)}
  .ew-timeline::before{left:12px}
  .ew-tl-item,.ew-tl-item:nth-child(even){width:auto;margin-left:44px}
  .ew-tl-item:nth-child(odd)::before,.ew-tl-item:nth-child(even)::before{left:-46px;right:auto}
}
@media (max-width:767px){
  .ew-sticker{display:none}
  .ew-cloud-b,.ew-cloud-d{display:none}
  .ew-tape{margin-top:-26px}
  .ew-t-word{font-size:1.1rem}
  /* stories: swipe through the bookshelf */
  .ew-shelf{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:22px;padding:10px 6px 26px;margin-left:-6px;margin-right:-6px;
    -webkit-overflow-scrolling:touch;
  }
  .ew-book{flex:0 0 78%;scroll-snap-align:center;margin-top:0 !important}
  /* art: two-column fridge door */
  .ew-art-grid{columns:2;column-gap:18px}
  .ew-art-piece{margin-bottom:24px}
  .ew-washi{width:74px;height:22px;top:-10px}
  /* explore: swipe the doors */
  .ew-doors{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:18px;padding:10px 6px 26px;
  }
  .ew-door{flex:0 0 70%;scroll-snap-align:center;aspect-ratio:3/3.7}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .ew-sky *,.ew-tape-track,.ew-sticker svg,.ew-reveal,
  .ew-book,.ew-art-piece,.ew-cassette,.ew-tl-item,.ew-door,
  .is-playing .ew-reel,.is-playing .ew-eq i,
  .gdlr-core-button.ew-btn-rainbow,.gdlr-core-button.ew-btn-ghost,
  .ew-rainbow-text{
    animation:none !important;transition:none !important;
  }
  .ew-reveal{opacity:1;transform:none}
}