/* SHIRA · home page: the hero with the live jewel, the categories, the "light film" and benefits. */

/* ---------- intro ---------- */
.intro{display:none}
.js .intro{display:flex;position:fixed;inset:0;z-index:60;background:#000;align-items:center;justify-content:center;transition:opacity .9s var(--ease),visibility 0s .9s}
.js.ready .intro{opacity:0;visibility:hidden;pointer-events:none}
.intro-mark{direction:ltr;font-family:var(--display);font-size:clamp(2.5rem,9vw,7rem);letter-spacing:.34em;margin-right:-.34em;color:#f5f5f7;display:flex}
.intro-mark span{opacity:0;transform:translateY(.35em);filter:blur(12px);animation:letter 1.1s var(--ease) forwards}
.intro-mark span:nth-child(2){animation-delay:.12s}
.intro-mark span:nth-child(3){animation-delay:.24s}
.intro-mark span:nth-child(4){animation-delay:.36s}
.intro-mark span:nth-child(5){animation-delay:.48s}
@keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- the jewel: one fixed canvas, seen through the hero and through the film ---------- */
.jewel{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:none;pointer-events:none;visibility:hidden}
.gl .jewel{display:block}

/* ---------- hero: one screen ---------- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:calc(var(--top) + 40px) var(--m) 64px;overflow:hidden}
.scene-text{display:grid;gap:20px;justify-items:center}
.scene-text .lead{max-width:26em}
.hero .actions{gap:8px 28px;margin-top:10px}
.poster{width:min(64vw,330px);height:auto}
.gl .poster,.has-banner .poster{display:none}
.gl .hero{justify-content:flex-start;padding-top:calc(var(--top) + 9svh)}
.scroll-hint{display:none}
.gl .scroll-hint{display:block;position:absolute;bottom:22px;left:0;right:0;font-size:.875rem;color:var(--faint)}
.gl .scroll-hint span{display:inline-block;animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

/* when the owner uploads a banner, it takes the hero and the ring waits for the film below */
.hero-banner{position:absolute;inset:0;z-index:-1;background:#000}
.hero-banner picture,.hero-banner img{display:block;width:100%;height:100%;object-fit:cover}
.hero-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 45%,rgba(0,0,0,.82) 100%)}
.has-banner .hero{z-index:2;justify-content:center;padding-top:calc(var(--top) + 40px)}
.has-banner .scroll-hint{display:none}

/* the hero text waits for the intro, then rises in */
.js .hero .scene-text > *,.js .scroll-hint{transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.js .hero .scene-text > *:nth-child(2){transition-delay:.12s}
.js .hero .scene-text > *:nth-child(3){transition-delay:.24s}
.js:not(.ready) .hero .scene-text > *,.js:not(.ready) .scroll-hint{opacity:0;transform:translateY(26px)}

/* ---------- categories: large cards, uneven grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.cat{position:relative;display:block;grid-column:span 4;height:clamp(300px,34vw,520px);border-radius:var(--r);overflow:hidden;background:var(--surface);text-decoration:none;isolation:isolate}
.cat.c-12{grid-column:span 12;height:clamp(240px,24vw,380px)}
.cat.c-7{grid-column:span 7}
.cat.c-6{grid-column:span 6}
.cat.c-5{grid-column:span 5}
.cat-media{position:absolute;inset:0;z-index:-1}
.cat-media > *{width:100%;height:100%;object-fit:cover}
.cat-media .ph-glyph{width:min(30%,170px);transition:transform 1.2s var(--ease),stroke .6s}
.cat-media .ph-cap{bottom:auto;top:20px;text-align:start;padding-inline:24px}
.cat:has(.media-img)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78) 100%)}
.cat-text{position:absolute;inset-inline:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:clamp(18px,2.2vw,30px)}
.cat-name{font-size:clamp(1.375rem,1.1rem + 1.3vw,2.25rem);font-weight:600;letter-spacing:-.015em;line-height:1.12;text-wrap:balance}
.cat-go{display:flex;align-items:center;gap:2px 14px;flex-wrap:wrap;font-size:.9375rem}
.cat-go > *{white-space:nowrap}
.cat-soon{color:var(--faint)}
.cat-cta{display:inline-flex;align-items:center;gap:6px;color:var(--gold)}
.cat-cta .ic{width:18px;height:18px;transition:transform .45s var(--ease)}
@media (hover:hover){
  a.cat:hover .cat-cta .ic,.coll:hover .cat-cta .ic{transform:translateX(-5px)}
  a.cat:hover .ph-glyph,.coll:hover .ph-glyph{transform:scale(1.07);stroke:#a3956f}
  a.cat:hover .media-img.is-in,.coll:hover .media-img.is-in{transform:scale(1.04)}
}

/* ---------- special collections ---------- */
.coll-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.coll{display:grid;gap:18px;text-decoration:none}
.coll-media{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.coll-media > *{width:100%;height:100%;object-fit:cover}
.coll-media .ph-glyph{width:min(20%,120px);transition:transform 1.2s var(--ease),stroke .6s}
.coll-text{display:grid;gap:6px;justify-items:start;padding-inline:4px}
.coll-name{font-size:clamp(1.375rem,1.15rem + 1vw,2rem);letter-spacing:-.015em;line-height:1.15}
.coll-desc{color:var(--muted);max-width:34em}
.coll:only-child{grid-column:1 / -1}
.coll:only-child .coll-media{aspect-ratio:21/9}

/* ---------- the film: a pinned stage with three scenes (the brand moment) ---------- */
.film{position:relative;z-index:1}
.film-pin{position:relative}
.scene{position:relative;min-height:80svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--top) + 40px) var(--m) 56px;gap:24px}
html:not(.gl) .film{display:none}
.gl .film{height:420svh}
.gl .film-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.gl .scene{position:absolute;inset:0;min-height:0;opacity:0;visibility:hidden;will-change:opacity,transform;pointer-events:none}
.gl .scene.on{visibility:visible}
.gl .scene.on .scene-text > *{pointer-events:auto}
.gl .scene-light{align-items:flex-start;text-align:start;padding-inline:max(var(--m),8vw)}
.gl .scene-light .scene-text{justify-items:start;max-width:min(44vw,34rem)}
.gl .scene-stone,.gl .scene-metal{justify-content:flex-end;padding-bottom:7svh}
.gl .scene-stone h2,.gl .scene-metal h2{font-size:clamp(2.25rem,1.5rem + 3.4vw,4.25rem)}

/* segmented control */
.seg{position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);background:rgba(118,118,128,.28);border-radius:999px;padding:4px;min-width:min(86vw,340px);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.seg button{position:relative;z-index:1;background:transparent;border:0;border-radius:999px;min-height:44px;padding:0 18px;font-size:1.0625rem;font-weight:500;color:var(--ink);cursor:pointer;transition:color .35s var(--ease)}
.seg button[aria-checked="true"]{color:#000}
.seg-thumb{position:absolute;top:4px;bottom:4px;right:4px;width:calc((100% - 8px) / 3);background:var(--btn);border-radius:999px;transition:transform .45s var(--ease)}
.seg[data-i="1"] .seg-thumb{transform:translateX(-100%)}
.seg[data-i="2"] .seg-thumb{transform:translateX(-200%)}

/* ---------- benefits (the owner's own texts) ---------- */
.benefits{padding-block:clamp(96px,13vw,190px) clamp(64px,8vw,120px)}
.steps-list{margin-top:clamp(44px,6vw,88px)}
.steps-list li{display:grid;grid-template-columns:minmax(120px,1.1fr) 1fr 2fr;gap:24px;align-items:baseline;padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line)}
.steps-list li:last-child{border-bottom:1px solid var(--line)}
.num{font-size:clamp(4rem,2.4rem + 7vw,8.5rem);font-weight:200;line-height:.9;letter-spacing:-.04em;direction:ltr;text-align:right;background:linear-gradient(180deg,#f5f5f7,#5a5346);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.steps-list h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.5rem);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.steps-list p{font-size:clamp(1.0625rem,1rem + .4vw,1.375rem);color:var(--muted);max-width:30em}
.js .steps-list li:nth-child(2){transition-delay:.1s}
.js .steps-list li:nth-child(3){transition-delay:.2s}

/* ---------- phone ---------- */
@media (max-width:760px){
  .gl .hero{padding-top:calc(var(--top) + 5svh)}
  .cat,.cat.c-4,.cat.c-5,.cat.c-6{grid-column:span 6;height:clamp(200px,56vw,300px)}
  .cat.c-7,.cat.c-12{grid-column:span 12;height:clamp(230px,62vw,340px)}
  .cat-text{gap:4px;padding:16px}
  .cat-name{font-size:1.25rem}
  .cat.c-7 .cat-name,.cat.c-12 .cat-name{font-size:1.625rem}
  .cat-media .ph-cap{display:none}
  .cat-media .ph-glyph{width:34%;margin-bottom:22%}
  .cat.c-7 .ph-glyph,.cat.c-12 .ph-glyph{width:24%;margin-bottom:12%}
  .coll-grid{grid-template-columns:1fr;gap:32px}
  .gl .scene-light{align-items:center;text-align:center;justify-content:flex-end;padding-bottom:9svh;padding-inline:var(--m)}
  .gl .scene-light .scene-text{justify-items:center;max-width:none}
  .steps-list li{grid-template-columns:1fr;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .js .intro{display:none}
  .gl .scroll-hint span{animation:none}
  .seg-thumb,.cat-cta .ic,.ph-glyph{transition:none}
}