/* ═══════════════════════════════════════════════════════════════════════════
   hero-editorial.css — Hero Style "Cinematic Split" (heroStyle: editorial)
   Interaction Demo v4 hero: fullscreen media (inherits every cinematic rule:
   .hero-editorial slides also carry .hero-cinematic), a big condensed title
   on the left and the description + pill button on the right. Title words
   rise in once js/pacco-motion.js marks the hero entered (store only — the
   Studio previews show the settled layout).
   Loaded by index.html (store) and studio.html (Hero Slides + Builder sims).
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"PcoBricolage";src:url("../assets/fonts/pco-bricolage.woff2") format("woff2");font-weight:400 800;font-stretch:75% 100%;font-display:swap}

.hero-slide.hero-editorial{--he-out:cubic-bezier(.16,1,.3,1);--he-g:clamp(18px,3.2vw,48px)}
.hero-slide.hero-editorial .hero-frame{justify-content:stretch !important;align-items:flex-end !important;padding:0 var(--he-g) clamp(26px,5vh,56px) !important}
.hero-slide.hero-editorial .hero-copy.hero-ed-copy{max-width:none !important;width:100%;flex-direction:row !important;justify-content:space-between !important;align-items:flex-end !important;gap:32px;text-align:left !important}
.hero-slide.hero-editorial .hero-ed-main{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start}
.hero-slide.hero-editorial .eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;margin:0 0 18px !important;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px !important;font-weight:650 !important;letter-spacing:.01em !important;text-transform:none !important}
.hero-slide.hero-editorial .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffc800}
.hero-slide.hero-editorial .eyebrow:empty{display:none}
.hero-slide.hero-editorial .hero-title{margin:0 !important;font-family:"PcoBricolage",Inter,ui-sans-serif,system-ui,sans-serif !important;font-weight:800 !important;font-stretch:75%;font-size:clamp(64px,8.8vw,172px) !important;line-height:.86 !important;letter-spacing:-.008em !important;text-transform:none !important;text-wrap:balance;max-width:11ch !important}
.hero-slide.hero-editorial .he-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .02em .14em;margin:-.08em -.02em -.14em}
.hero-slide.hero-editorial .he-w>span{display:inline-block}
.hero-slide.hero-editorial .hero-ed-aside{flex:0 0 auto;width:min(310px,100%);display:grid;gap:18px;justify-items:start;padding-bottom:.4em}
.hero-slide.hero-editorial .hero-text{margin:0 !important;max-width:none !important;font-size:17px !important;font-weight:400 !important;line-height:1.4 !important;letter-spacing:0 !important;text-transform:none !important;opacity:.76;text-wrap:pretty}
.hero-slide.hero-editorial .hero-actions{margin:0 !important}
/* Pill button (demo .btn): white pill, ink arrow disc, letters roll on hover */
.hero-slide.hero-editorial .hero-actions .button.hero-ed-btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;min-height:54px !important;width:auto !important;padding:0 26px !important;border:0 !important;border-radius:999px !important;background:var(--he-bg,#fff) !important;color:var(--he-fg,#0c0b0f) !important;font-family:inherit;font-size:16px !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;text-decoration:none;box-shadow:none !important;overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.34,1.45,.55,1),box-shadow .35s !important}
.hero-slide.hero-editorial .hero-actions .button.hero-ed-btn:hover{transform:translateY(-2px);box-shadow:0 18px 30px -18px rgba(0,0,0,.6) !important}
.hero-slide.hero-editorial .hero-actions .button.hero-ed-btn:active{transform:scale(.97)}
.hero-slide.hero-editorial .hero-ed-rt{display:inline-flex;overflow:hidden;height:1.25em;line-height:1.25}
.hero-slide.hero-editorial .hero-ed-rt>span{display:inline-block;position:relative;transition:transform .55s var(--he-out);transition-delay:calc(var(--i,0) * 22ms)}
.hero-slide.hero-editorial .hero-ed-rt>span::after{content:attr(data-l);position:absolute;left:0;top:100%}
.hero-slide.hero-editorial .hero-ed-btn:hover .hero-ed-rt>span,.hero-slide.hero-editorial .hero-ed-btn:focus-visible .hero-ed-rt>span{transform:translateY(-100%)}
.hero-slide.hero-editorial .hero-ed-arrow{width:30px;height:30px;margin-right:-12px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--he-fg,#0c0b0f);color:var(--he-bg,#fff);transition:transform .45s cubic-bezier(.34,1.45,.55,1)}
.hero-slide.hero-editorial .hero-ed-arrow svg{width:16px;height:16px}
.hero-slide.hero-editorial .hero-ed-btn:hover .hero-ed-arrow,.hero-slide.hero-editorial .hero-ed-btn:focus-visible .hero-ed-arrow{transform:rotate(45deg)}
/* Softer, taller scrim so the left title and right copy both read */
.hero-slide.hero-editorial .hero-cine-scrim{background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,.2) 46%,transparent 72%) !important}

/* Entrance (store, driven by js/pacco-motion.js): words rise, aside fades,
   media eases in from a slight zoom. Each newly active slide replays it. */
html.pmx-js .hero-section .hero-slide.hero-editorial .he-w>span{transform:translateY(112%)}
html.pmx-js .hero-section.pmx-hero-in .hero-slide.hero-editorial.active .he-w>span{transform:none;transition:transform 1.15s var(--he-out);transition-delay:calc(var(--wi,0) * 90ms + 80ms)}
html.pmx-js .hero-section .hero-slide.hero-editorial .hero-ed-aside,html.pmx-js .hero-section .hero-slide.hero-editorial .eyebrow{opacity:0;transform:translate3d(0,16px,0)}
html.pmx-js .hero-section.pmx-hero-in .hero-slide.hero-editorial.active .hero-ed-aside,html.pmx-js .hero-section.pmx-hero-in .hero-slide.hero-editorial.active .eyebrow{opacity:1;transform:none;transition:opacity .9s ease .52s,transform 1s var(--he-out) .5s}
html.pmx-js .hero-section .hero-slide.hero-editorial .hero-cine-media img,html.pmx-js .hero-section .hero-slide.hero-editorial .hero-cine-media video{scale:1.08}
html.pmx-js .hero-section.pmx-hero-in .hero-slide.hero-editorial.active .hero-cine-media img,html.pmx-js .hero-section.pmx-hero-in .hero-slide.hero-editorial.active .hero-cine-media video{scale:1;transition:scale 2s var(--he-out) .05s}

/* Floating top bar (store-motion.css): the hero fills the whole screen. */
@media (min-width:901px){
  body.pmx-overhero .hero-slide.hero-cinematic .hero-frame,html.pmx-overhero-pre body .hero-slide.hero-cinematic .hero-frame{min-height:100svh;min-height:100dvh}
  body.pmx-overhero .hero-slide.hero-editorial .hero-frame{padding-top:96px !important}
}

/* Phones (store): the demo's 23vw title swallowed the screen at phone size,
   so the whole split block scaled down (ref 1). */
@media (max-width:768px){
  .hero-slide.hero-editorial .hero-frame{padding:0 20px calc(26px + env(safe-area-inset-bottom,0px)) !important;align-items:stretch !important;justify-content:flex-end !important}
  .hero-slide.hero-editorial .hero-copy.hero-ed-copy{flex-direction:column !important;align-items:flex-start !important;gap:20px}
  .hero-slide.hero-editorial .hero-title{font-size:clamp(42px,13vw,76px) !important;max-width:none !important}
  .hero-slide.hero-editorial .hero-ed-aside{width:100%;gap:14px;padding:0}
  .hero-slide.hero-editorial .hero-text{font-size:16px !important}
  .hero-slide.hero-editorial .hero-ed-aside{gap:14px}
}
@media (max-height:640px) and (min-width:769px){.hero-slide.hero-editorial .hero-text{display:none}}

/* Studio sims (viewport units don't follow the simulated width) */
#viewport:not(.mode-mobile):not(.mode-tablet) .hero-slide.hero-editorial .hero-title,
#builderViewport:not(.mode-mobile):not(.mode-tablet) .hero-slide.hero-editorial .hero-title{font-size:120px !important}
#viewport.mode-tablet .hero-slide.hero-editorial .hero-title,#builderViewport.mode-tablet .hero-slide.hero-editorial .hero-title{font-size:84px !important}
#viewport.mode-mobile .hero-slide.hero-editorial .hero-frame,#builderViewport.mode-mobile .hero-slide.hero-editorial .hero-frame{padding:0 20px 26px !important;align-items:stretch !important;justify-content:flex-end !important}
#viewport.mode-tablet .hero-slide.hero-editorial .hero-frame,#builderViewport.mode-tablet .hero-slide.hero-editorial .hero-frame{justify-content:flex-end !important;align-items:stretch !important}
#viewport.mode-mobile .hero-slide.hero-editorial .hero-copy.hero-ed-copy,#builderViewport.mode-mobile .hero-slide.hero-editorial .hero-copy.hero-ed-copy,
#viewport.mode-tablet .hero-slide.hero-editorial .hero-copy.hero-ed-copy,#builderViewport.mode-tablet .hero-slide.hero-editorial .hero-copy.hero-ed-copy{flex-direction:column !important;align-items:flex-start !important;gap:18px}
#viewport.mode-mobile .hero-slide.hero-editorial .hero-title,#builderViewport.mode-mobile .hero-slide.hero-editorial .hero-title{font-size:52px !important;max-width:none !important}
#viewport.mode-mobile .hero-slide.hero-editorial .hero-ed-aside,#builderViewport.mode-mobile .hero-slide.hero-editorial .hero-ed-aside{width:100%;gap:14px;padding:0}
#viewport.mode-mobile .hero-slide.hero-editorial .hero-text,#builderViewport.mode-mobile .hero-slide.hero-editorial .hero-text{font-size:16px !important;margin:0 !important}
#viewport.mode-mobile .hero-slide.hero-editorial .hero-actions .button.hero-ed-btn,#builderViewport.mode-mobile .hero-slide.hero-editorial .hero-actions .button.hero-ed-btn{height:54px !important;min-height:54px !important;padding:0 26px !important;font-size:16px !important}

@media (prefers-reduced-motion:reduce){
  html.pmx-js .hero-section .hero-slide.hero-editorial .he-w>span,
  html.pmx-js .hero-section .hero-slide.hero-editorial .hero-ed-aside,
  html.pmx-js .hero-section .hero-slide.hero-editorial .eyebrow{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-slide.hero-editorial .hero-ed-rt>span{transition:none !important}
  .hero-slide.hero-editorial .hero-ed-btn:hover .hero-ed-rt>span{transform:none !important}
  html.pmx-js .hero-section .hero-slide.hero-editorial .hero-cine-media img,html.pmx-js .hero-section .hero-slide.hero-editorial .hero-cine-media video{scale:1 !important}
}