/* Homepage sections shared by both directions: New here, the About panel,
   the Life at the Temple gallery, the phone swipe row for events, and the
   starting states for motion.js. Each theme file restyles these. */
:root { --card-radius: 12px; }

/* Life at the Temple: expanding gallery */
.life { padding-block: clamp(56px, 7vw, 88px); }
.gallery { display: flex; gap: 10px; height: clamp(420px, 44vw, 560px); }
.g-item { position: relative; flex: 1 1 0; min-width: 0; scroll-margin-top: 96px; border-radius: var(--card-radius); overflow: hidden; cursor: pointer; background: #1a1210; transition: flex-grow .7s var(--ease); outline-offset: 3px; }
.g-item.is-active { flex-grow: 5.5; cursor: default; }
.g-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s; filter: saturate(.85) brightness(.85); }
.g-item:hover img { filter: saturate(1) brightness(.95); }
.g-item.is-active img { filter: none; transform: scale(1.03); }
.g-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 10, 30, .82) 0%, rgba(18, 10, 30, .25) 45%, transparent 70%); opacity: .55; transition: opacity .5s; pointer-events: none; }
.g-item.is-active::after { opacity: 1; }
.g-label { position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: opacity .3s; }
.g-item.is-active .g-label { opacity: 0; }
.g-cap { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(520px, 100%); padding: clamp(20px, 3vw, 36px); color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; pointer-events: none; }
.g-item.is-active .g-cap { opacity: 1; transform: none; transition-delay: .35s; pointer-events: auto; }
.g-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.g-cap h3 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 10px; }
.g-cap p:not(.g-kicker) { color: rgba(255, 255, 255, .88); font-size: 16px; line-height: 1.55; margin-bottom: 14px; }
.g-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.g-link:hover { color: var(--gold); }
@media (max-width: 760px) {
  .gallery { flex-direction: column; height: auto; gap: 8px; }
  .g-item { flex: none; height: 68px; transition: height .6s var(--ease); }
  .g-item.is-active { height: 440px; }
  .g-label { writing-mode: horizontal-tb; transform: none; left: 18px; bottom: auto; top: 50%; translate: 0 -50%; }
  .g-item::after { opacity: .75; }
  .g-more { display: none; }
  .g-cap p:not(.g-kicker) { font-size: 15px; margin-bottom: 10px; }
  .g-cap h3 { font-size: 24px; }
}

/* New here */
.new-here { display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px; align-items: center; padding-block: clamp(56px, 7vw, 88px) 8px; }
.nh-copy h2 { font-size: clamp(32px, 3.4vw, 44px); }
.nh-copy p { color: var(--muted); max-width: 40ch; }
.nh-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; }
.nh-facts > div { padding: 0 8px; }
.nh-facts svg { font-size: 52px; color: var(--gold-deep); margin: 0 auto 14px; }
.nh-facts h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; }
.nh-facts p { font-size: 15px; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .new-here { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .nh-facts { grid-template-columns: 1fr; text-align: left; } .nh-facts > div { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 0; } .nh-facts svg { grid-row: span 2; font-size: 40px; margin: 0; } }

/* ---------- Motion layer (motion.js) ---------- */

/* Masked text: lines and words slide up from behind their own box */
.line { display: block; text-wrap: balance; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.line-in { display: inline-block; will-change: transform; }

/* Starting states so nothing flashes before GSAP takes over */
.gsap-on .hero .hero-title, .gsap-on .hero .hero-sub, .gsap-on .hero .watch, .gsap-on .hero .hero-loc,
.gsap-on .hero .hero-ctas, .gsap-on .hero .rule { animation: none; }
.gsap-on .hero .hero-title { visibility: hidden; }
.gsap-on .hero .hero-title:has(.word, .line) { visibility: visible; }
.gsap-on .hero .hero-sub, .gsap-on .hero .watch, .gsap-on .hero .hero-loc, .gsap-on .hero .hero-ctas, .gsap-on .hero .rule,
.gsap-on .quick .quick-card,
.gsap-on .this-week .tw-item,
.gsap-on .site-footer .f-brand,
.gsap-on .site-footer .f-col { visibility: hidden; }
.gsap-on [data-split]:not(:has(.line)) { visibility: hidden; }
.gsap-on .event-card .event-media { clip-path: inset(100% 0 0 0); }
.gsap-on .event-card .event-body { visibility: hidden; }

/* About the Temple: a photo panel in the same language as the hero and gallery */
.about-dl { padding-top: clamp(56px, 7vw, 88px); }
.about-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); min-height: clamp(460px, 44vw, 580px); display: flex; align-items: center; background: #1a1210; }
/* Taller than the panel so motion.js can drift it against the scroll */
.about-bg { position: absolute; inset: -7% 0; width: 100%; height: 114%; object-fit: cover; object-position: center 60%; z-index: -2; transition: scale 1.6s var(--ease); }
html:not(.gsap-on) .about-panel:hover .about-bg { scale: 1.03; } /* with motion on, motion.js zooms it */
.about-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 10, 24, .9) 0%, rgba(18, 10, 24, .72) 42%, rgba(18, 10, 24, .2) 75%, rgba(18, 10, 24, .35) 100%), linear-gradient(0deg, rgba(18, 10, 24, .5), transparent 45%); }
.about-body { width: min(600px, 100%); padding: clamp(28px, 5vw, 64px); color: #fff; }
.about-body h2 { text-wrap: balance; color: #fff; font-size: clamp(32px, 3.6vw, 48px); margin-bottom: 18px; }
.about-body > p:not(.g-kicker) { color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.6; margin-bottom: 28px; }
.about-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
@media (max-width: 900px) {
  /* Phones and tablets: the photo stays clear as a block on top and the copy sits on solid plum below */
  .about-panel { display: block; min-height: 0; background: var(--purple-deep); }
  .about-panel::before { display: none; }
  .about-bg { position: relative; inset: auto; z-index: auto; height: 240px; object-position: center 55%; }
  .about-body { padding: 28px var(--gutter) 34px; }
  .about-body h2 { font-size: clamp(28px, 7vw, 34px); }
}
.gsap-on .about-panel, .gsap-on .about-body > p, .gsap-on .about-ctas { visibility: hidden; }

/* Phones: Upcoming Events becomes a swipeable row, the next card peeks in from the right */
@media (max-width: 620px) {
  .event-swipe { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .event-swipe::-webkit-scrollbar { display: none; }
  .event-swipe .event-card { flex: 0 0 82%; scroll-snap-align: start; }
  .event-swipe .event-body h3 { font-size: 21px; }
}

/* ---------- Live motion (2026-10-17) ---------- */

/* Hero photo or video drifts at a fraction of the scroll speed; motion.js animates --hero-y on desktop */
.hero-img, .hero-video { translate: 0 var(--hero-y, 0); }

/* A pulsing dot beside "online" and "Live Fridays" */
.live-pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); position: relative; margin-right: 10px; vertical-align: middle; top: -1px; }
.live-pip::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--gold); animation: live-ring 2.4s ease-out infinite; }
@keyframes live-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* The four point star in the gold rules turns slowly; a quarter turn reads as a twinkle */
.spark { transform-box: fill-box; transform-origin: center; animation: twinkle 5.5s ease-in-out infinite; }
@keyframes twinkle { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(45deg) scale(.72); opacity: .65; } 100% { transform: rotate(90deg) scale(1); } }

/* Shabbat and Torah Talks: a split panel. Each half carries its subject as a ghost word; hovering a half
   grows it, flips it to plum and brings its photo up behind the copy while the other half yields.
   Phones and touch screens show both halves stacked in the plum look. */
.ways { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); }
.ways-split { display: flex; min-height: clamp(460px, 42vw, 580px); }
.way { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: clamp(44px, 6vw, 88px) clamp(var(--gutter), 5vw, 96px); color: var(--ink); background: var(--paper); text-decoration: none; transition: flex-grow .7s var(--ease), background .5s, color .5s; }
.way + .way { border-left: 1px solid var(--line); }
.way-bg { position: absolute; inset: -6% 0; height: 112%; width: 100%; object-fit: cover; z-index: -1; opacity: 0; scale: 1.08; transition: opacity .7s, scale 1.8s var(--ease); pointer-events: none; mask-image: linear-gradient(to bottom, #000 25%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 92%); }
.way-who { position: absolute; top: clamp(24px, 3.6vw, 48px); left: clamp(var(--gutter), 5vw, 96px); z-index: 0; font-family: var(--font-display); font-size: clamp(60px, 9vw, 128px); line-height: 1; letter-spacing: -.02em; color: var(--purple-deep); opacity: .07; pointer-events: none; user-select: none; transition: opacity .5s, color .5s, margin-left .7s var(--ease); }
.way-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); transition: color .5s; }
.way-headline { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); line-height: 1.1; max-width: 15ch; text-wrap: balance; color: var(--purple-deep); transition: color .5s; }
.way-text { color: var(--muted); max-width: 42ch; line-height: 1.55; transition: color .5s; }
.way-link { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--purple); margin-top: 6px; transition: color .5s; }
.way-link svg { transition: transform .25s var(--ease), color .5s; }
@media (hover: hover) and (min-width: 801px) {
  .ways-split:hover .way { flex-grow: .8; }
  .ways-split .way:hover { flex-grow: 1.4; background: var(--purple-deep); color: #fff; }
  .way:hover .way-bg { opacity: .45; scale: 1; }
  .way:hover .way-who { color: var(--gold); opacity: .9; margin-left: 10px; } /* margin, not translate: GSAP owns the transform for the scroll drift */
  .way:hover .way-headline, .way:hover .way-link { color: #fff; }
  .way:hover .way-kicker { color: var(--gold); }
  .way:hover .way-text { color: rgba(255, 255, 255, .82); }
  .way:hover .way-link svg { transform: translateX(4px); color: var(--gold); }
}
@media (max-width: 800px), (hover: none) {
  .ways-split { flex-direction: column; min-height: 0; }
  .way { flex: 0 0 auto; justify-content: flex-start; padding: 36px var(--gutter) 44px; background: var(--purple-deep); color: #fff; }
  .way + .way { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .way-bg { opacity: .32; scale: 1; }
  .way-who { position: static; font-size: clamp(44px, 12vw, 64px); color: var(--gold); opacity: 1; margin-bottom: 4px; }
  .way-headline, .way-link { color: #fff; }
  .way-kicker { color: var(--gold); }
  .way-text { color: rgba(255, 255, 255, .82); }
  .way-link svg { color: var(--gold); }
}
/* Starting states: each half opens from the centre seam, then its copy rises */
.gsap-on .way { clip-path: inset(0 0 0 100%); }
.gsap-on .way + .way { clip-path: inset(0 100% 0 0); }
.gsap-on .way-kicker, .gsap-on .way-headline, .gsap-on .way-text, .gsap-on .way-link { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .live-pip::after, .spark { animation: none; } .way, .way-bg, .way-who { transition: none; } }