/* Ladybug Fashion — Ladybug Fashion World hero, night film, and virtual guide.

   The artwork is the scenery. The shopfronts on top of it are transparent
   anchors positioned over the buildings that are painted there, so the hero is
   navigation rather than a picture of navigation.

   Locked palette only. Aqua, teal, cyan and turquoise are banned brand colours
   and appear nowhere in this file. */

/* ---------- the plaza ---------- */
.plaza{position:relative;display:block;overflow:hidden;isolation:isolate;
  background:var(--purple);contain:paint}
.plaza__art{display:block;width:100%;height:auto}

/* ---------- shopfronts ---------- */
.plaza__shop{position:absolute;z-index:6;display:block;border-radius:14px;
  border:2px solid transparent;text-decoration:none;
  transition:border-color .25s,box-shadow .25s,background .25s}
.plaza__shop:hover,.plaza__shop:focus-visible{
  border-color:var(--pink);
  background:rgba(239,167,196,.14);
  box-shadow:0 0 22px rgba(239,167,196,.75), inset 0 0 26px rgba(239,167,196,.32);
  outline:none}
.plaza__shop:focus-visible{border-color:var(--cream);
  box-shadow:0 0 0 3px var(--cream), 0 0 26px rgba(239,167,196,.85)}
.plaza__shop.is-lit{border-color:var(--pink);
  box-shadow:0 0 24px rgba(239,167,196,.8), inset 0 0 28px rgba(239,167,196,.35)}

/* the artwork already names each shop, so the tip is a confirmation on hover
   and the accessible name for anyone who cannot see the painting */
.plaza__tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(5px);
  background:var(--black);color:var(--cream);padding:6px 13px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;
  box-shadow:0 0 18px rgba(123,79,163,.6)}
.plaza__shop:hover .plaza__tip,.plaza__shop:focus-visible .plaza__tip{opacity:1;transform:translateX(-50%)}

/* ---------- night ---------- */
.plaza.is-night .plaza__art{filter:saturate(1.08) brightness(.94)}
.plaza.is-night .plaza__shop.is-lit,
.plaza.is-night .plaza__shop:hover{box-shadow:0 0 30px rgba(239,167,196,.9), inset 0 0 30px rgba(239,167,196,.4)}

/* ---------- the night film ----------
   The writing used to be laid over the footage, which meant the film had to be
   dimmed to keep cream text readable and cropped to fill the band behind it --
   so the picture was both darker and smaller than the one that was shot. The
   words now sit underneath on their own black band. The film is shown whole:
   its real frame, its real brightness, nothing cropped away. */
.film{position:relative;display:block;overflow:hidden;background:var(--pink)}
.film__v{display:block;width:100%;height:auto;position:static;
  filter:saturate(1.06)}

/* The band under the film is brand pink, so the writing on it is the brand
   black rather than cream: black on #EFA7C4 measures 8.4:1, cream on it only
   1.8:1, which would be unreadable. The eyebrow is black for the same reason --
   brand purple on this pink is 3.2:1, under the 4.5:1 small text needs -- and
   takes its separation from size and letter-spacing instead of colour. */
.film__cap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:clamp(24px,3.6vw,44px) 20px clamp(28px,4vw,52px);
  text-align:center;color:var(--black)}
.film__cap .eyebrow{color:var(--black);margin:0 0 8px;opacity:.78}
.film__cap h2{font-family:var(--script);font-size:clamp(1.6rem,3.6vw,2.6rem);
  margin:0 0 20px;color:var(--black);font-weight:600}
/* a pink button on a pink band is invisible, so the way in is inverted */
.film__cap .btn--pink{background:var(--black);color:var(--cream);border-color:var(--black)}
.film__cap .btn--pink:hover{background:var(--purple);border-color:var(--purple);color:var(--cream)}

/* ---------- the virtual guide ---------- */
.guide{background:linear-gradient(180deg,#2b1140 0%,var(--purple) 58%,var(--pink-deep) 100%);
  padding:0;overflow:hidden}
.guide__in{max-width:var(--wrap);margin:0 auto;padding:44px 20px;
  display:grid;gap:34px;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:center}
@media (max-width:860px){ .guide__in{grid-template-columns:1fr;text-align:center;padding:32px 20px} }

.guide__art{position:relative;justify-self:center;max-width:430px;width:100%}
.guide__art img{display:block;width:100%;height:auto;border-radius:var(--radius);
  box-shadow:0 0 40px rgba(239,167,196,.4), 0 22px 50px rgba(36,32,36,.5)}
.guide__art button{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;
  cursor:pointer;border-radius:var(--radius);padding:0}
.guide__art button:focus-visible{outline:3px solid var(--cream);outline-offset:4px}
.guide__glow{position:absolute;inset:-6%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(239,167,196,.5),transparent 68%);
  animation:guide-glow 5.5s ease-in-out infinite}
@keyframes guide-glow{0%,100%{opacity:.55}50%{opacity:.95}}

.guide__copy{color:var(--cream)}
.guide__copy .eyebrow{color:var(--pink)}
.guide__copy h2{font-family:var(--script);font-size:clamp(1.8rem,3.6vw,2.7rem);margin:0 0 12px;color:var(--cream)}
.guide__copy p{color:rgba(255,248,242,.9);max-width:52ch}
@media (max-width:860px){ .guide__copy p{margin-inline:auto} }

.guide__say{background:rgba(36,32,36,.55);border:1px solid rgba(239,167,196,.5);
  border-radius:var(--radius);padding:14px 18px;margin:16px 0 0;font-size:.95rem;line-height:1.6;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .3s,padding .3s}
.guide__say.is-on{opacity:1;max-height:340px}

.guide__ui{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px}
@media (max-width:860px){ .guide__ui{justify-content:center} }
.guide__btn{display:inline-flex;align-items:center;gap:7px;background:var(--cream);color:var(--black);
  border:1px solid transparent;border-radius:999px;padding:11px 20px;font:inherit;font-size:.85rem;
  font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.guide__btn:hover{background:var(--pink);transform:translateY(-2px)}
.guide__btn--ghost{background:transparent;color:var(--cream);border-color:rgba(255,248,242,.55)}
.guide__btn--ghost:hover{background:rgba(255,248,242,.14)}
.guide__btn:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.guide__btn[hidden]{display:none}
.guide__vol{width:90px;accent-color:var(--pink)}

/* shop menu raised from the guide */
.guide__menu{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(36,32,36,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
.guide__menu.is-on{display:grid}
.guide__card{background:var(--cream);border-radius:var(--radius);padding:26px;max-width:min(580px,100%);
  box-shadow:var(--shadow-lift);max-height:85vh;overflow:auto}
.guide__card h3{margin:0 0 4px;font-size:1.3rem}
.guide__card p{margin:0 0 18px;color:var(--ink-soft);font-size:.92rem}
.guide__grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.guide__grid a{display:block;padding:12px 14px;border-radius:var(--radius-sm);background:var(--pink-wash);
  border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem;
  transition:background .2s,transform .2s}
.guide__grid a:hover{background:var(--pink);transform:translateY(-2px)}
.guide__grid small{display:block;font-weight:500;color:var(--ink-soft);font-size:.74rem;margin-top:2px}

/* ---------- calm / reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .plaza__shop,.plaza__tip,.guide__btn,.guide__glow{transition:none;animation:none}
}

/* the guide hides itself if her artwork is not on the server yet */
.guide.no-guide{display:none}

/* ---------- the plaza on a phone ----------
   This used to crop to the headquarters and switch the shopfronts off below
   700px, on the reasoning that the painted signs were too small to read. That
   was wrong twice over: the crop hid four of the seven stores completely, and
   turning the links off made the one thing the artwork is for -- being walked
   into -- stop working on the devices most people are holding.

   So the whole city is shown at every size and every shopfront stays live. At
   375px each one is about 49 by 60 CSS pixels, comfortably past the 44px
   minimum for a finger, and each still carries its own name for anyone who
   cannot see the painting. */
@media (max-width:700px){
  .plaza__art{aspect-ratio:auto;object-fit:fill}
  /* the outline is drawn in at phone size, so a shopfront reads as something
     you can press rather than as scenery */
  .plaza__shop{border-color:rgba(239,167,196,.55);border-radius:10px}
  .plaza__tip{font-size:.66rem;padding:5px 10px}
}

/* ============================================================
   THE HERO: the night film, full width, on its own

   The guide used to stand inside this band. She now closes the page instead
   of opening it, so the film is a single column again and every override that
   squeezed her into the right-hand side is gone rather than left behind to
   confuse the next person.
   ============================================================ */
.hero-film{position:relative;overflow:hidden;background:var(--pink);display:block}
.hero-film > #lf-film{min-width:0}
.hero-film .film{position:static;background:none}

/* ============================================================
   THE GREETING

   She is the first thing that happens. The moment the page has finished
   loading and her artwork is actually ready, she comes up over the whole
   screen, says her welcome and then steps aside into the shop.

   Her sound still waits for a tap. That is deliberate and it is the rule:
   a storefront that starts talking at you by itself is a storefront people
   close. The greeting itself starts on its own -- she fades in and her words
   arrive line by line -- so the introduction plays whether or not anyone ever
   presses the speaker.

   Built entirely in lf-guide.js, so with JavaScript off there is no overlay
   and no locked page: the shop simply opens as normal.
   ============================================================ */
.hello{position:fixed;inset:0;z-index:300;display:none;overflow:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(ellipse 90% 60% at 30% 38%,rgba(239,167,196,.34),transparent 70%),
    linear-gradient(180deg,#2b1140 0%,var(--purple) 58%,var(--pink-deep) 100%)}
.hello.is-on{display:block}
body.is-greeting{overflow:hidden}

.hello__in{min-height:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(18px,3.4vw,44px) 20px;
  display:grid;gap:clamp(18px,3.6vw,44px);
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center}

/* she is a tall portrait, so she is held to the height of the screen rather
   than to the width of her column */
.hello .guide__art{max-width:360px;justify-self:center}
.hello .guide__art img{width:auto;max-width:100%;
  max-height:min(70vh,640px);margin:0 auto}
.hello .guide__copy h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:0 0 14px}
.hello .guide__copy > p{font-size:1.05rem}

/* the welcome, revealed line by line while she stands there */
.hello .guide__say{max-height:none;overflow:visible}

.hello__enter{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hello__go{display:inline-flex;align-items:center;gap:8px;
  background:var(--cream);color:var(--black);border:1px solid transparent;
  border-radius:999px;padding:14px 30px;font:inherit;font-size:.95rem;font-weight:700;
  cursor:pointer;box-shadow:0 10px 30px rgba(36,32,36,.28);
  transition:background .2s,transform .2s}
.hello__go:hover{background:var(--pink);transform:translateY(-2px)}
.hello__go:focus-visible{outline:3px solid var(--cream);outline-offset:3px}

/* the way out, always visible, top right, never hidden behind her */
.hello__x{position:absolute;top:14px;right:14px;z-index:2;
  background:rgba(36,32,36,.5);color:var(--cream);
  border:1px solid rgba(255,248,242,.5);border-radius:999px;
  padding:9px 18px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:background .2s}
.hello__x:hover{background:rgba(36,32,36,.8)}
.hello__x:focus-visible{outline:3px solid var(--cream);outline-offset:2px}

/* the entrance: she arrives, then her words do */
.hello.is-on .guide__art{animation:hello-rise .85s cubic-bezier(.2,.7,.3,1) both}
.hello.is-on .guide__copy{animation:hello-rise .85s cubic-bezier(.2,.7,.3,1) .18s both}
@keyframes hello-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.hello.is-out{animation:hello-leave .45s ease forwards}
@keyframes hello-leave{to{opacity:0;visibility:hidden}}

/* ---------- the greeting on a phone ----------
   Stacked, she does not fit on one screen: her portrait, the welcome and the
   controls come to more than 812px however they are trimmed. So the welcome is
   allowed to run on and the way in is pinned to the bottom of the screen
   instead. Nobody has to scroll a greeting to find the door. */
@media (max-width:860px){
  .hello__in{grid-template-columns:1fr;text-align:center;
    align-content:start;gap:14px;padding-top:52px;padding-bottom:0}
  .hello .guide__art{max-width:240px}
  .hello .guide__art img{max-height:30vh}
  .hello .guide__copy h2{font-size:clamp(1.7rem,7.4vw,2.2rem);margin:0 0 10px}
  .hello .guide__copy > p{font-size:.98rem;margin-bottom:.8em}
  .hello .guide__copy p{margin-inline:auto}
  .hello .guide__say{font-size:.92rem;padding:12px 15px}
  .hello .guide__ui{justify-content:center;gap:8px}
}
@media (max-width:700px){
  /* On a phone the standing paragraph and the spoken welcome say the same
     thing twice, and saying it twice is what pushed the shop buttons off the
     bottom of the screen. Her own words stay; the caption goes. */
  .hello .guide__copy > p:not(.eyebrow):not(.guide__say){display:none}
  .hello .guide__art img{max-height:26vh}
  .hello .guide__say{font-size:.88rem}
  /* A phone has a volume rocker and a mute switch on the side of it. Replay,
     Mute and a volume slider are three controls that only push the way into
     the shop off the bottom of the screen, so on a phone she keeps Pause. */
  .hello .guide__ui .g-extra{display:none}

  .hello__enter{position:sticky;bottom:0;z-index:3;justify-content:center;
    margin:16px -20px 0;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(217,120,159,0) 0%,var(--pink-deep) 42%)}
  .hello__go{width:100%;justify-content:center;padding:15px 24px}
}
@media (max-width:860px) and (max-height:640px){
  .hello .guide__art img{max-height:24vh}
}

/* the shop menu is raised from inside the greeting, so it sits above it */
.guide__menu{z-index:320}

@media (prefers-reduced-motion:reduce){
  .hello.is-on .guide__art,.hello.is-on .guide__copy,.hello.is-out{animation:none}
  .hello__go{transition:none}
}

/* The speaker when the browser has refused to let her talk. It is the only
   thing on the greeting that asks for a press, so it says so plainly rather
   than sitting there looking like every other button. */
.guide__btn.is-waiting{background:var(--pink);box-shadow:0 0 0 0 rgba(255,248,242,.7);
  animation:hello-knock 2.4s ease-out infinite}
@keyframes hello-knock{
  0%{box-shadow:0 0 0 0 rgba(255,248,242,.55)}
  70%{box-shadow:0 0 0 14px rgba(255,248,242,0)}
  100%{box-shadow:0 0 0 0 rgba(255,248,242,0)}
}
@media (prefers-reduced-motion:reduce){ .guide__btn.is-waiting{animation:none} }


/* ============================================================
   THE DOORS, AND THE ROOM BEHIND THEM

   The lit entrance of the headquarters opens the chat room. A doorway that
   does something has to look like it does something, so it wears a neon sign
   over it -- brand pink, because that is the only neon this city has.
   ============================================================ */

.plaza__shop--chat{border-color:rgba(239,167,196,.75);
  box-shadow:0 0 18px rgba(239,167,196,.55), inset 0 0 24px rgba(239,167,196,.28)}
.plaza__shop--chat:hover,.plaza__shop--chat:focus-visible{
  box-shadow:0 0 34px rgba(239,167,196,1), inset 0 0 34px rgba(239,167,196,.45)}

/* the sign itself, hanging over the doors */
.plaza__neon{position:absolute;left:50%;bottom:calc(100% + 6px);
  transform:translateX(-50%);pointer-events:none;text-align:center;
  white-space:nowrap;line-height:1.15}
.plaza__neon b{display:block;font-size:clamp(.56rem,1.15vw,.86rem);font-weight:800;
  letter-spacing:.16em;color:#fff;
  text-shadow:
    0 0 4px #fff,
    0 0 10px var(--pink),
    0 0 20px var(--pink),
    0 0 38px var(--pink-deep);
  animation:neon-flash 2.6s steps(1,end) infinite}
.plaza__neon i{display:block;font-style:normal;
  font-size:clamp(.44rem,.85vw,.62rem);letter-spacing:.12em;text-transform:uppercase;
  color:var(--pink);text-shadow:0 0 8px var(--pink)}

/* A real neon sign does not fade, it drops out and comes back. Two quick
   stutters and a long steady burn, so it reads as a sign rather than as a
   throb -- and it never goes fully dark, so the words stay readable. */
@keyframes neon-flash{
  0%,  6%   {opacity:1}
  7%,  9%   {opacity:.35}
  10%, 13%  {opacity:1}
  14%, 16%  {opacity:.35}
  17%, 100% {opacity:1}
}

/* ---------- the chat room ---------- */
.hq{position:fixed;inset:0;z-index:340;display:none;overflow:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(ellipse 80% 60% at 26% 40%,rgba(239,167,196,.30),transparent 70%),
    linear-gradient(180deg,#2b1140 0%,var(--purple) 60%,var(--pink-deep) 100%)}
.hq.is-on{display:block}
body.is-hq{overflow:hidden}

.hq__in-wrap{min-height:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(18px,3.2vw,40px) 20px;
  display:grid;gap:clamp(16px,3vw,40px);
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:center}

.hq__face{justify-self:center;max-width:300px;position:relative}
.hq__face img{width:auto;max-width:100%;max-height:min(62vh,560px);margin:0 auto;
  border-radius:var(--radius);
  box-shadow:0 0 40px rgba(239,167,196,.42), 0 22px 50px rgba(36,32,36,.5)}

.hq__side{color:var(--cream);min-width:0}
.hq__side .eyebrow{color:var(--pink)}
.hq__side h2{font-family:var(--script);font-size:clamp(1.7rem,3.4vw,2.5rem);
  margin:0 0 10px;color:var(--cream)}
.hq__lead{color:rgba(255,248,242,.9);max-width:52ch;font-size:.96rem}

.hq__x{position:absolute;top:14px;right:14px;z-index:2;
  background:rgba(36,32,36,.5);color:var(--cream);
  border:1px solid rgba(255,248,242,.5);border-radius:999px;
  padding:9px 18px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.hq__x:hover{background:rgba(36,32,36,.82)}
.hq__x:focus-visible{outline:3px solid var(--cream);outline-offset:2px}

.hq__log{margin:16px 0 0;max-height:min(40vh,340px);overflow:auto;
  display:flex;flex-direction:column;gap:10px;padding-right:4px}
.hq__line p{margin:0;padding:11px 15px;border-radius:var(--radius);font-size:.94rem}
.hq__line--you{align-self:flex-end;max-width:85%}
.hq__line--you p{background:var(--cream);color:var(--black);
  border-bottom-right-radius:5px}
.hq__line--her{align-self:flex-start;max-width:92%}
.hq__line--her p{background:rgba(36,32,36,.55);color:var(--cream);
  border:1px solid rgba(239,167,196,.5);border-bottom-left-radius:5px}
/* she is saying this one out loud right now */
.hq__line--her.is-speaking p{border-color:var(--pink);
  box-shadow:0 0 18px rgba(239,167,196,.5)}

.hq__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.hq__chip{background:transparent;color:var(--cream);
  border:1px solid rgba(255,248,242,.45);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:.79rem;cursor:pointer;
  transition:background .2s,color .2s}
.hq__chip:hover{background:var(--pink);color:var(--black);border-color:var(--pink)}

.hq__ask{display:flex;gap:8px;margin-top:14px}
.hq__in{flex:1;min-width:0;padding:12px 16px;border-radius:999px;
  border:1px solid rgba(255,248,242,.45);background:rgba(36,32,36,.4);
  color:var(--cream);font:inherit;font-size:.95rem}
.hq__in::placeholder{color:rgba(255,248,242,.6)}
.hq__in:focus{outline:3px solid var(--cream);outline-offset:2px}
.hq__go{background:var(--cream);color:var(--black);border:0;border-radius:999px;
  padding:12px 26px;font:inherit;font-weight:700;cursor:pointer}
.hq__go:hover{background:var(--pink)}

@media (max-width:860px){
  .hq__in-wrap{grid-template-columns:1fr;align-content:start;
    padding-top:56px;gap:14px;text-align:center}
  .hq__face{max-width:170px}
  .hq__face img{max-height:24vh}
  .hq__lead{margin-inline:auto}
  .hq__chips,.hq__ask{justify-content:center}
  .hq__log{text-align:left;max-height:34vh}
}

@media (prefers-reduced-motion:reduce){
  .plaza__neon b{animation:none}
}