/* Image Mask Text widget */
.mask-text{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.86;color:var(--gold2);display:inline-block}
/* Photo fill where supported; the solid gold colour above is the fallback */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mask-text{color:transparent;-webkit-text-fill-color:transparent;background-color:var(--gold);background-size:cover;background-position:center;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .mask-text{background:none!important}
}

/* Variant 1 — hero, slow pan & zoom */
.mt-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 1rem 3rem;background:radial-gradient(ellipse at 50% 55%,var(--glow),var(--bg) 65%)}
.mt-hero h1.mask-text{font-family:var(--sans);font-weight:800;font-size:clamp(4.6rem,21vw,21rem);letter-spacing:-.03em;line-height:.82}
.mask-photo{background-size:135% auto;animation:mtPan 24s ease-in-out infinite}
@keyframes mtPan{0%{background-size:130% auto;background-position:0% 35%}50%{background-size:158% auto;background-position:100% 65%}100%{background-size:130% auto;background-position:0% 35%}}
.mt-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,2rem);color:var(--cream);margin:1.4rem 0 0}

/* Variant 2 — video fill via blend: white text on page colour, multiplied over the video */
.mt-video{padding:clamp(3rem,10vh,7rem) 0}
.mt-video-wrap{position:relative;isolation:isolate;overflow:hidden;height:clamp(200px,30vw,440px)}
.mt-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mt-video-mask{position:absolute;inset:-1px;display:grid;place-items:center;background:var(--bg);color:#fff;mix-blend-mode:multiply}
.mt-video-mask span{font-family:var(--sans);font-weight:800;text-transform:uppercase;font-size:clamp(4.2rem,22vw,22rem);letter-spacing:-.04em;line-height:1}
.mt-caption{text-align:center;color:var(--muted);margin:1.6rem 1rem 0}
.mt-caption .eyebrow{display:block;margin-bottom:.4rem}

/* Variant 3 — one photo per word, zoom on hover */
.mt-words{padding:clamp(4rem,12vh,8rem) clamp(1.2rem,6vw,6rem);max-width:1400px;margin:0 auto}
.mt-words ul{list-style:none;margin:1rem 0 0;padding:0}
.mt-words li{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;border-top:1px solid rgba(var(--gold-rgb),.18);padding:1.2rem 0 .6rem}
.mt-words li:last-child{border-bottom:1px solid rgba(var(--gold-rgb),.18)}
.mask-hover{font-size:clamp(4rem,15vw,14rem);background-size:115% auto;transition:background-size 1.4s cubic-bezier(.2,.8,.2,1),background-position 1.4s}
.mt-words li:hover .mask-hover{background-size:150% auto;background-position:30% 40%}
.mt-words small{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.8vw,1.5rem);color:var(--muted);text-align:right}

/* Variant 4 — scroll reveal: photo floods into outlined letters */
.mt-reveal{padding:clamp(6rem,30vh,16rem) clamp(1.2rem,6vw,6rem) clamp(8rem,35vh,18rem);max-width:1500px;margin:0 auto}
.reveal-line{position:relative;font-family:var(--sans);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,8.6vw,8.8rem);letter-spacing:-.03em;line-height:.95;margin-bottom:.08em;white-space:nowrap}
.reveal-line>span{display:block;line-height:.95}
.mt-outline{color:transparent;-webkit-text-stroke:1px rgba(var(--gold-rgb),.45)}
.reveal-line .mt-fill{position:absolute;inset:0;font-size:inherit;background-size:cover;will-change:clip-path}

@media (max-width:760px){
  .mt-words li{flex-direction:column;gap:.2rem}
  .mt-words small{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .mask-photo{animation:none}
  .mask-hover{transition:none}
}

/* ---------- Theme-aware details ---------- */
.mt-hero{position:relative}
.mt-hero .mt-hero-h{font-family:var(--sans);font-weight:800;font-size:clamp(4.2rem,19vw,19rem);letter-spacing:-.03em;line-height:.82}
.theme-light .mt-hero{background:radial-gradient(ellipse 70% 60% at 50% 50%,#fffcf6,var(--bg) 72%)}
/* Video fill on white: black lettering on white, screen-blended over the video.
   screen(white) = white, screen(black) = video — so the film shows only inside the letters. */
.theme-light .mt-video-mask{background:#fff;color:#000;mix-blend-mode:screen}
.theme-light .mt-outline{-webkit-text-stroke:1px rgba(var(--gold-rgb),.55)}
.theme-light .mt-words li{border-color:rgba(var(--gold-rgb),.22)}
.theme-light .mask-text{background-color:var(--gold2)}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.theme-light .mask-text{color:var(--gold2)}}
@supports not (mix-blend-mode:screen){.theme-light .mt-video-mask{background:transparent;color:#fff}}