/* mallowin.com — Home canvas
   One fullscreen video canvas. Seven world names ring the Mallowin logo that lives
   in the home loop. Hovering a name swaps the video AND opens that world's card in
   the centre. Single warm scrim, cream type throughout — no per-video colour shifts. */

/* official logo colours, sampled from Mallowin-Logo-NoBG.png */
:root{
  --logo-teal:#244C4D;
  --logo-olive:#76702E;
  --logo-caramel:#B37D46;
  --logo-brown:#854811;
  --paper:#F7EDE5;
}

/* ---------- canvas ---------- */
.canvas{position:relative;height:100svh;min-height:36rem;overflow:hidden;background:var(--ink)}
.canvas__layer{position:absolute;inset:0;z-index:0}
.canvas__layer video,.canvas__layer img,
.canvas__world video,.canvas__world img{width:100%;height:100%;object-fit:cover;display:block}

/* world layers wipe in from the side their name sits on */
.canvas__world{position:absolute;inset:0;z-index:1;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s cubic-bezier(.65,0,.2,1)}
.canvas__world.is-right{clip-path:inset(0 0 0 100%)}
.canvas__world.is-active{clip-path:inset(0)}

/* one warm scrim, always on — keeps cream type legible on every loop */
.canvas__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 48%,rgba(46,32,21,.14) 0%,rgba(46,32,21,.54) 100%),
    linear-gradient(180deg,rgba(46,32,21,.44) 0%,rgba(46,32,21,.12) 32%,rgba(46,32,21,.56) 100%)}

/* ---------- header ---------- */
.canvas__head{position:absolute;top:0;left:0;right:0;z-index:6;padding:1.5rem 0;
  /* the bar spans the full width and sits above the cards — without this it
     silently swallows clicks aimed at anything beneath it (e.g. the card's Close) */
  pointer-events:none}
.canvas__head .brand,.canvas__head .nav,.canvas__head .nav a,
.canvas__head .navlink,.canvas__head .homebtn{pointer-events:auto}
/* the carved-M avatar in a circle, matched to the home icon and wearing the same
   glass as the world cards */
.canvas__head .brand{display:inline-flex;align-items:center;justify-content:center;
  width:3.4rem;height:3.4rem;padding:0;border-radius:50%;
  background:rgba(34,23,15,.26);
  -webkit-backdrop-filter:blur(5px) saturate(1.06);
  backdrop-filter:blur(5px) saturate(1.06);
  box-shadow:inset 0 0 0 1px rgba(247,237,229,.14);
  transition:background .35s ease,transform .35s ease}
.canvas__head .brand:hover{background:rgba(34,23,15,.38);transform:translateY(-1px)}
.canvas__head .brand img{width:76%;height:76%;object-fit:contain;display:block}

/* home icon */
.homebtn{display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border:0;border-radius:999px;cursor:pointer;padding:0;
  background:rgba(34,23,15,.24);color:var(--paper);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  box-shadow:inset 0 0 0 1px rgba(247,237,229,.16);transition:background .3s ease}
.homebtn:hover{background:var(--logo-teal)}
.homebtn svg{width:1.05rem;height:1.05rem;display:block}
.canvas__head .nav a{color:var(--paper);text-shadow:0 1px 12px rgba(30,20,12,.6)}
.canvas__head .nav a:hover{color:#EBD9A8}
.canvas__head .nav a.btn,
.canvas__head .nav button.btn{background:var(--logo-teal);color:var(--paper);text-shadow:none}
.canvas__head .nav a.btn:hover,
.canvas__head .nav button.btn:hover{background:var(--logo-olive);color:var(--paper)}
.navlink{font-family:var(--sans);border:0;background:none;color:var(--paper);cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;padding:0;
  text-shadow:0 1px 12px rgba(30,20,12,.6)}
.navlink:hover{color:#EBD9A8}

/* ---------- overlay ---------- */
.canvas__ui{position:absolute;inset:0;z-index:4;pointer-events:none}

/* the ring of world names, orbiting the logo in the loop */
.wtitle{position:absolute;pointer-events:auto;text-align:center;white-space:nowrap;
  padding:.55rem .8rem;color:var(--paper);text-decoration:none;background:none;border:0;
  cursor:pointer;font-family:var(--sans);transform:translate(-50%,-50%);
  transition:opacity .5s ease,filter .5s ease;
  animation:drift var(--dur,21s) ease-in-out var(--del,0s) infinite alternate}
.wtitle__name{font-family:var(--sans);font-weight:600;display:block;
  font-size:clamp(.82rem,1.15vw,1rem);letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(24,16,9,.8),0 2px 20px rgba(24,16,9,.6)}
.wtitle__who{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,237,229,.74);margin-top:.28rem;
  opacity:0;transform:translateY(.3rem);transition:opacity .4s ease,transform .4s ease}
.wtitle:hover .wtitle__who,.wtitle:focus-visible .wtitle__who{opacity:1;transform:none}
.canvas.is-open .wtitle{opacity:.3;filter:blur(2.5px)}
.canvas.is-open .wtitle.is-on{opacity:1;filter:none}
.canvas.is-about .wtitle{opacity:0;pointer-events:none}

@keyframes drift{
  from{transform:translate(-50%,-50%)}
  to{transform:translate(calc(-50% + var(--dx,9px)),calc(-50% + var(--dy,-9px)))}
}

/* seven positions on an ellipse around the centred logo */
.w1{top:17%;left:50%}   .w1{--dx:9px;--dy:-8px;--dur:21s;--del:0s}
.w2{top:30%;left:77%}   .w2{--dx:-10px;--dy:9px;--dur:24s;--del:1.3s}
.w3{top:57%;left:83%}   .w3{--dx:8px;--dy:10px;--dur:19s;--del:.6s}
.w4{top:75%;left:66%}   .w4{--dx:-9px;--dy:-10px;--dur:23s;--del:2s}
.w5{top:75%;left:34%}   .w5{--dx:10px;--dy:-8px;--dur:20s;--del:1s}
.w6{top:57%;left:17%}   .w6{--dx:-8px;--dy:10px;--dur:22s;--del:2.4s}
.w7{top:30%;left:23%}   .w7{--dx:9px;--dy:9px;--dur:25s;--del:1.7s}

/* ---------- centre stage: world cards + about ---------- */
.stage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(88vw,38rem);z-index:5;pointer-events:none;text-align:center}
/* a soft smoked-glass panel so the words read over any loop */
/* Light glass: a heavy blur was hiding the characters, so the blur is small and the
   tint thin. Legibility comes back through the text shadows instead. */
.wcard{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);
  width:100%;opacity:0;visibility:hidden;pointer-events:none;
  background:rgba(34,23,15,.26);
  -webkit-backdrop-filter:blur(5px) saturate(1.06);
  backdrop-filter:blur(5px) saturate(1.06);
  border-radius:26px;padding:2.4rem clamp(1.6rem,3.4vw,2.8rem) 2.5rem;
  box-shadow:0 24px 70px rgba(18,12,7,.26),inset 0 0 0 1px rgba(247,237,229,.14);
  transition:opacity .55s ease,transform .55s ease,visibility .55s}
.wcard.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%);pointer-events:auto}

.wcard h2{font-family:var(--serif);color:var(--paper);font-size:clamp(1.55rem,3.2vw,2.35rem);
  margin:0 0 .5rem;line-height:1.12;
  text-shadow:0 2px 6px rgba(24,16,9,.75),0 2px 22px rgba(24,16,9,.6)}
.card__who{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:#E9C48D;margin:0 0 1.35rem;text-shadow:0 1px 6px rgba(24,16,9,.8)}
.card__who::after{content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:rgba(233,196,141,.55);margin:.9rem auto 0}
.wcard p{color:rgba(247,237,229,.96);margin:0 auto 1.15rem;max-width:40ch;
  font-size:clamp(.94rem,1.2vw,1.02rem);line-height:1.85;
  text-shadow:0 1px 5px rgba(24,16,9,.85),0 1px 18px rgba(24,16,9,.65)}
.wcard p:last-of-type{margin-bottom:1.9rem}
.wcard a[href^="mailto"]{color:#E3B87C;text-decoration:underline;text-underline-offset:.22em}
.wcard .btn{background:var(--logo-teal);color:var(--paper)}
.wcard .btn:hover{background:var(--logo-caramel);color:var(--ink)}
/* sits inside the panel so it can't collide with the ring name above it */
.card__close{position:absolute;top:.85rem;right:1.1rem;transform:none;
  background:none;border:0;color:rgba(247,237,229,.62);cursor:pointer;font-family:var(--sans);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:.4rem .5rem;
  transition:color .3s ease}
.card__close:hover{color:var(--paper)}

/* ---------- the line at the foot ---------- */
/* the pair sits on the same white glass as the mark */
.tagline{position:absolute;left:50%;bottom:4.5%;transform:translateX(-50%);z-index:5;
  width:auto;max-width:96vw;text-align:center;pointer-events:none;
  padding:.9rem clamp(1.3rem,2.6vw,2.1rem);border-radius:22px;
  background:rgba(34,23,15,.26);
  -webkit-backdrop-filter:blur(5px) saturate(1.06);
  backdrop-filter:blur(5px) saturate(1.06);
  box-shadow:inset 0 0 0 1px rgba(247,237,229,.14),0 18px 50px rgba(18,12,7,.22);
  transition:opacity .5s ease}
/* two lines, matched size — the first is sized to stay on a single line */
.tagline span{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(.6rem,.86vw,.78rem);line-height:1.95;
  margin:0;white-space:nowrap;color:rgba(247,237,229,.94);font-weight:600;
  text-shadow:0 1px 5px rgba(24,16,9,.8),0 1px 16px rgba(24,16,9,.6)}
.canvas.is-open .tagline,.canvas.is-about .tagline{opacity:0}

/* ---------- mobile: no hover — a readable stack ---------- */
@media(max-width:900px),(hover:none){
  .canvas{height:auto;min-height:0;background:var(--cream);display:flex;flex-direction:column}
  .canvas__head{position:static;order:1;padding:1.25rem 0 .5rem}
  .canvas__head .nav a,.navlink{color:var(--walnut);text-shadow:none}
  .canvas__head .brand img{width:150px}
  .canvas__layer{position:relative;order:2;height:42svh}
  .canvas__world,.canvas__scrim{display:none}
  .canvas__ui{position:static;order:3;pointer-events:auto}

  .tagline{position:static;transform:none;width:auto;opacity:1!important;
    padding:1.5rem var(--pad) .25rem;color:var(--muted);text-shadow:none}
  .stage{position:static;transform:none;width:auto;padding:0 var(--pad)}
  /* on the cream stack the smoked panel would look wrong — use a soft card instead */
  .wcard{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    display:none;text-align:left;background:var(--cream-2);backdrop-filter:none;
    -webkit-backdrop-filter:none;box-shadow:none;border-radius:16px;
    padding:1.4rem 1.35rem 1.6rem;margin:.25rem 0 1.25rem}
  .wcard.is-on{display:block;transform:none}
  .wcard h2{color:var(--ink);text-shadow:none;font-size:1.32rem}
  .card__who{color:var(--honey);margin-bottom:1rem}
  .card__who::after{margin-left:0;background:rgba(192,138,74,.45)}
  .wcard p{color:var(--walnut);text-shadow:none;margin-left:0;max-width:none}
  .card__close{position:static;transform:none;display:block;margin-top:1rem;color:var(--muted)}
  .tagline span:last-child{color:var(--honey)}

  .wtitle{position:static;animation:none;display:block;width:100%;text-align:left;
    padding:1rem 0;border-bottom:1px solid var(--cream-3);
    opacity:1!important;filter:none!important;transform:none}
  .wtitle__name{color:var(--ink);text-shadow:none;font-size:1.18rem}
  .wtitle__who{opacity:1;transform:none;color:var(--muted)}
  .ring{display:block;padding:0 var(--pad) 1.5rem}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .wtitle{animation:none}
  .canvas__world{transition:none}
  /* the loop stays visible — JS pauses it so it shows a still frame instead.
     Hiding it here previously left a blank block on any device with
     Reduce Motion switched on. */
}

/* --- mobile tweaks for the new chrome --- */
@media(max-width:900px),(hover:none){
  .canvas__head .brand{background:none;box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;padding:0}
  .canvas__head .brand img{width:150px}
  .homebtn{background:var(--cream-2);color:var(--walnut);box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .homebtn:hover{background:var(--logo-teal);color:var(--paper)}
  .wtitle__name{color:var(--ink);text-shadow:none;font-size:.9rem;letter-spacing:.14em}
  .tagline span{color:var(--muted);text-shadow:none;font-size:.74rem}
  .tagline span:last-child{color:var(--honey)}
  .wcard h2,.wcard p,.card__who{text-shadow:none}
}

@media(max-width:900px),(hover:none){
  .tagline span{white-space:normal;font-size:.72rem;line-height:1.75;margin-bottom:.4rem}
  .canvas__head .brand{background:var(--cream-2);box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;width:3.6rem;height:3.6rem;padding:0}
  .canvas__head .brand img{width:76%;height:76%}
  .tagline{background:none;box-shadow:none;backdrop-filter:none;
    -webkit-backdrop-filter:none;padding:1.5rem var(--pad) .25rem;border-radius:0}
  .tagline span{color:var(--muted);text-shadow:none}
}

/* ---------- landing animation ----------
   Filmed in the same room as the home loop, so it fills the frame and hands
   straight over to it. Silent — the source has no audio track at all. */
.intro{position:fixed;inset:0;z-index:300;background:#EDE7DF;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .9s ease,visibility .9s ease}
.intro[hidden]{display:none}
.intro.is-done{opacity:0;visibility:hidden;pointer-events:none}
.intro video{width:100%;height:100%;object-fit:cover;background:#EDE7DF;display:block}
.intro__skip{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);border:0;cursor:pointer;padding:.6rem 1.15rem;border-radius:999px;
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);transition:background .3s ease}
.intro__skip:hover{background:rgba(255,255,255,.6)}
html.intro-lock,html.intro-lock body{overflow:hidden}
@media(prefers-reduced-motion:reduce){ .intro{display:none} }

/* --- narrow phones: names must wrap, and the loop must show the letters --- */
@media(max-width:900px),(hover:none){
  .wtitle{white-space:normal}
  .canvas__layer{height:46svh}
  /* the loop's wordmark sits low in frame; bias the crop down so it isn't cut off */
  .canvas__layer video,.canvas__layer img{object-position:center 68%}
}

/* --- phones: make sideways overflow structurally impossible ---
   .canvas is a flex column; flex items default to min-width:auto, so any wide
   descendant refuses to shrink and pushes the page sideways. */
@media(max-width:900px),(hover:none){
  html,body{overflow-x:hidden;max-width:100%}
  .canvas,.canvas__head,.canvas__layer,.canvas__ui,.ring,.stage,.wcard,.tagline{
    min-width:0;max-width:100%}
  .canvas__head .wrap,.ring,.stage{box-sizing:border-box}
  .wtitle,.tagline span{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .wtitle__name,.wtitle__who{white-space:normal;overflow-wrap:anywhere}
  .canvas__layer video,.canvas__layer img{width:100%;max-width:100%}
}

/* --- the stacked phone layout must never inherit the desktop centring transform,
       whatever the motion preference --- */
@media(max-width:900px),(hover:none){
  .wtitle{transform:none!important;position:static!important}
  .canvas__layer video,.canvas__layer img{display:block!important}
}

/* ---------- newsletter sign-up (inside a wcard) ---------- */
.sub{margin:0 auto;max-width:24rem;text-align:left}
.sub__field{display:block;margin:0 0 1rem}
.sub__label{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:#E9C48D;margin:0 0 .45rem}
.sub input[type=email]{width:100%;font-family:var(--sans);font-size:1rem;color:var(--paper);
  background:rgba(255,255,255,.10);border:0;border-radius:12px;padding:.85rem 1rem;
  box-shadow:inset 0 0 0 1px rgba(247,237,229,.22);outline:none}
.sub input[type=email]::placeholder{color:rgba(247,237,229,.45)}
.sub input[type=email]:focus{box-shadow:inset 0 0 0 2px #E9C48D}
.sub__consent{display:flex;gap:.65rem;align-items:flex-start;margin:0 0 1.3rem;
  font-size:.86rem;line-height:1.6;color:rgba(247,237,229,.92);cursor:pointer}
.sub__consent input{margin-top:.25rem;accent-color:var(--logo-teal);width:1rem;height:1rem;flex:none}
.sub__consent a{color:#E9C48D;text-decoration:underline;text-underline-offset:.2em}
.sub .btn{width:100%;text-align:center}
.sub .btn:disabled{opacity:.55;cursor:default}
/* honeypot — off-screen, never shown to a person */
#subHp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sub__msg{margin:.9rem 0 0;font-size:.86rem;min-height:1.2em;text-align:center;
  color:rgba(247,237,229,.8)}
.sub__msg.is-good{color:#A8D8A8}
.sub__msg.is-bad{color:#F0B4A0}

@media(max-width:900px),(hover:none){
  .sub{max-width:none}
  .sub__label{color:var(--honey)}
  .sub input[type=email]{color:var(--ink);background:#fff;
    box-shadow:inset 0 0 0 1px var(--cream-3)}
  .sub input[type=email]::placeholder{color:var(--muted)}
  .sub__consent{color:var(--walnut)}
  .sub__consent a{color:var(--amber)}
  .sub__msg{color:var(--muted)}
  .sub__msg.is-good{color:#3f7a45}
  .sub__msg.is-bad{color:#a4503a}
}

/* --- cards must never rise into the header bar on short windows --- */
.stage{top:calc(50% + 1.7rem)}
.wcard{max-height:calc(100svh - 9.5rem);overflow-y:auto;overscroll-behavior:contain}
/* the sign-up button is a <button>, so kill the browser's default bevel */
.wcard .btn,.sub .btn{border:0;-webkit-appearance:none;appearance:none}
@media(max-width:900px),(hover:none){
  .stage{top:auto}
  .wcard{max-height:none;overflow:visible}
}