/* DINAR · /offices, the two offices as a page of its own (owner, 2026-11-02).
   A dark, cinematic page in the brand's espresso and gold, driven by scrolling: each [data-scene] receives --p (0..1)
   from the page script and everything below is derived from it. Motion comes from the visitor's own scrolling, so it
   never runs on by itself; the opening plays once on load. With less motion asked for (.ox-calm) every scene is shown
   finished and nothing sticks. Shared pieces (the invitation form, the badge, the rows) live in offices.css. */

body.ox{background:#0f0c0a;color:var(--ivory)}
.ox .hd{background:transparent;color:var(--ivory);border-color:transparent;animation:none}
.ox .hd.solid{background:rgba(15,12,10,.78);backdrop-filter:blur(14px);color:var(--ivory);border-color:rgba(201,169,114,.18)}

/* ---------- 1 · the opening ---------- */
.ox-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center;padding:110px 16px 90px;
  background:radial-gradient(60% 50% at 50% 62%,rgba(201,169,114,.18),transparent 70%),radial-gradient(120% 80% at 50% 120%,rgba(201,169,114,.12),transparent 60%),#0f0c0a}
.ox-hero-in{display:flex;flex-direction:column;align-items:center}
.ox-mark{width:clamp(70px,7vw,96px)}
.ox-k{margin-top:30px;color:var(--gold)}
.ox-h1{margin-top:18px;font-family:var(--f-serif);font-weight:500;font-size:clamp(56px,10vw,160px);line-height:1;color:var(--ivory);letter-spacing:-.01em}
.ox-horizon{display:block;width:min(78vw,980px);height:1px;margin:clamp(30px,5vh,52px) 0;background:linear-gradient(90deg,transparent,var(--gold) 18%,#fbeec6 50%,var(--gold) 82%,transparent);box-shadow:0 0 22px rgba(251,238,198,.45)}
.ox-pair{display:flex;align-items:center;gap:.9em;direction:ltr;font-family:var(--f-lat);font-weight:500;font-size:clamp(18px,2.6vw,36px);letter-spacing:.34em;padding-inline-start:.34em;color:var(--ivory)}
.ox-pair i{width:.32em;height:.32em;background:var(--gold);transform:rotate(45deg)}
.ox-cs{margin-top:26px;direction:ltr;font-family:var(--f-lat);font-size:clamp(13px,1.3vw,17px);letter-spacing:.5em;padding-inline-start:.5em;background:var(--metal);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.ox-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:rgba(244,240,231,.55);display:flex;flex-direction:column;align-items:center;gap:10px}
.ox-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:oxCue 2.4s ease-in-out 2.4s 3 both}
@keyframes oxCue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* the entrance, once */
.ox-mark{animation:oxIn 1.1s cubic-bezier(.2,.7,.2,1) 0s both,sheen 9s ease-in-out infinite}
.ox-k{animation:oxUp .9s cubic-bezier(.2,.7,.2,1) .15s both}
.ox-h1{animation:oxWipe 1.1s cubic-bezier(.7,0,.2,1) .25s both}
.ox-horizon{animation:oxLine 1.5s cubic-bezier(.7,0,.2,1) .7s both}
.ox-pair{animation:oxTrack 1.5s cubic-bezier(.2,.7,.2,1) 1s both}
.ox-cs{animation:oxUp 1s ease 1.4s both,oxSweep 2s cubic-bezier(.2,.7,.2,1) 1.6s both}
@keyframes oxIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes oxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes oxWipe{from{clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes oxLine{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
@keyframes oxTrack{from{opacity:0;letter-spacing:.9em}to{opacity:1;letter-spacing:.34em}}
@keyframes oxSweep{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- 2 · the two coasts: two arched windows open into the two halves of the screen ---------- */
.ox-duo{position:relative;height:190vh}
.ox-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0f0c0a}
.ox-duo .ox-stick{--a:clamp(0,calc(var(--p,0)*1.7),1);--b:clamp(0,calc((var(--p,0) - .3)*2.2),1)}
.ox-pane{position:absolute;top:0;bottom:0;width:50%;margin:0;overflow:hidden;
  clip-path:inset(calc((1 - var(--a))*12%) calc((1 - var(--a))*16%) calc((1 - var(--a))*10%) calc((1 - var(--a))*16%) round calc((1 - var(--a))*260px) calc((1 - var(--a))*260px) 0 0)}
.ox-pane.p1{right:0}
.ox-pane.p2{left:0}
.ox-pane img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.3 - var(--a)*.3));filter:brightness(calc(.72 + var(--a)*.13))}
.ox-pane::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,10,.25),transparent 40%,rgba(15,12,10,.7))}
.ox-pane figcaption{position:absolute;z-index:1;bottom:7%;inset-inline:0;text-align:center;direction:ltr;font-family:var(--f-lat);font-size:clamp(11px,1vw,13px);letter-spacing:.42em;padding-inline-start:.42em;color:rgba(244,240,231,.78);opacity:var(--b)}
.ox-seam{position:absolute;z-index:2;left:50%;top:50%;width:1px;height:calc(var(--a)*100%);transform:translate(-50%,-50%);background:linear-gradient(transparent,var(--gold),transparent)}
.ox-nm{position:absolute;z-index:2;top:50%;width:50%;margin:0;text-align:center;direction:ltr;font-family:var(--f-lat);font-weight:500;line-height:1;color:var(--ivory);
  font-size:clamp(36px,5.2vw,100px);letter-spacing:calc(.1em + (1 - var(--b))*.3em);padding-inline:4%;box-sizing:border-box;opacity:var(--b);transform:translateY(calc(-50% + (1 - var(--b))*30px));text-shadow:0 10px 50px rgba(0,0,0,.45)}
.ox-nm.n1{right:0}
.ox-nm.n2{left:0}

/* ---------- 3, 4 · each city full screen; the card rises over the settling photograph ---------- */
.ox-city{position:relative;height:150vh}
.ox-city .ox-stick{--c:clamp(0,calc((var(--p,0) - .05)*3.2),1)}
.ox-city .off-vis{aspect-ratio:auto;display:block;container-type:normal;background:#0f0c0a}
.ox-city .off-vis::before{display:none}
.ox-city .off-vis::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,12,10,.35),transparent 35%,rgba(15,12,10,.82))}
.ox-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(calc(1.2 - var(--p,0)*.2));filter:brightness(calc(.82 + var(--p,0)*.14))}
.ox-card{position:absolute;z-index:2;bottom:clamp(28px,9vh,100px);inset-inline-start:clamp(16px,6vw,110px);width:min(470px,calc(100% - 32px));padding:clamp(24px,3vw,38px);
  background:rgba(15,12,10,.58);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(201,169,114,.32);color:var(--ivory);
  opacity:var(--c);transform:translateY(calc((1 - var(--c))*70px))}
.ox-city[data-office="nahariya"] .ox-card{inset-inline-start:auto;inset-inline-end:clamp(16px,6vw,110px)}
.ox-no{display:block;font-family:var(--f-lat);font-size:clamp(36px,4vw,56px);line-height:1;color:var(--gold)}
.ox-card h2{margin-top:10px;font-size:calc(var(--hs)*clamp(34px,4vw,58px));color:var(--ivory)}
.ox-lat{display:block;margin-top:12px;direction:ltr;text-align:start;font-family:var(--f-lat);font-size:12px;letter-spacing:.3em;color:var(--gold)}
html[dir="rtl"] .ox-lat{text-align:right}
.ox-card .off-rows{margin-top:22px}
.ox-card .off-rows>div{border-top-color:rgba(244,240,231,.16)}
.ox-card .off-rows dt{color:rgba(244,240,231,.6)}
.ox-card .off-rows dd{color:var(--ivory)}
.ox-card .off-map{color:var(--ivory);border-color:var(--gold)}
.ox-card .off-badge{display:inline-block;margin-top:22px;color:var(--gold);border-color:rgba(201,169,114,.5)}
.ox-cred{position:absolute;z-index:2;bottom:10px;inset-inline-end:14px;font-size:10.5px;letter-spacing:.04em;color:rgba(244,240,231,.45);direction:ltr}
.ox-city[data-office="nahariya"] .ox-cred{inset-inline-end:auto;inset-inline-start:14px}

/* ---------- 5 · the invitation ---------- */


/* ---------- phones: the two windows stack, one coast above the other ---------- */
@media (max-width:760px){
  .ox-duo{height:170vh}
  .ox-pane{width:100%;height:50%;clip-path:inset(calc((1 - var(--a))*16%) calc((1 - var(--a))*22%) calc((1 - var(--a))*6%) calc((1 - var(--a))*22%) round calc((1 - var(--a))*140px) calc((1 - var(--a))*140px) 0 0)}
  .ox-pane.p1{top:0;bottom:auto}
  .ox-pane.p2{top:50%;bottom:auto}
  .ox-seam{width:calc(var(--a)*100%);height:1px}
  .ox-nm{width:100%;font-size:clamp(30px,10.5vw,58px);letter-spacing:calc(.05em + (1 - var(--b))*.18em);padding-inline:6%}
  .ox-nm.n1{top:25%}
  .ox-nm.n2{top:75%}
  .ox-pane figcaption{bottom:8%}
  .ox-city{height:140vh}
  .ox-card,.ox-city[data-office="nahariya"] .ox-card{inset-inline:16px;width:auto;bottom:24px}
  .ox-cred{bottom:auto;top:96px}
}

/* ---------- less motion: everything finished, nothing sticks ---------- */
.ox-calm .ox-duo,.ox-calm .ox-city{height:auto}
.ox-calm .ox-stick{position:relative}
.ox-calm .ox-hero *,.ox-calm .ox-cue::after{animation:none!important}

/* the offices themselves (owner's first renders, 2026-11-03): marked as a render, readable, in Hebrew */
.ox-render{direction:rtl;font-size:12px;letter-spacing:.08em;color:rgba(244,240,231,.8);background:rgba(15,12,10,.45);padding:5px 10px;backdrop-filter:blur(6px)}
.ox-city[data-office="nahariya"] .ox-bg{object-position:72% 50%}
.ox-credits{margin:34px auto 0;max-width:620px;text-align:center;font-size:11px;letter-spacing:.04em;color:rgba(244,240,231,.4);direction:ltr}
@media (max-width:760px){.ox-city[data-office="nahariya"] .ox-bg{object-position:93% 42%}}

/* the scroll scenes are full-bleed: no section padding and no light card background around them (owner's screenshots,
   2026-11-03: a light band above the office photographs and a light line before the invitation) */
.ox-duo,.ox-city,.ox-city.off{padding:0;background:#0f0c0a;box-shadow:none;display:block}
.ox-invite{padding-block:clamp(64px,11vh,120px)}
.ox-invite .ox-credits{margin-top:26px}
/* seams blend (owner's standing rule): each scene fades into the dark at its top and bottom, and the invitation starts
   in the same dark the last scene ends in */
.ox-pane::after{background:linear-gradient(180deg,rgba(15,12,10,.25),transparent 40%,rgba(15,12,10,.75) 88%,#0f0c0a)}
.ox-city .off-vis::after{background:linear-gradient(180deg,#0f0c0a 0,rgba(15,12,10,.25) 14%,transparent 34%,rgba(15,12,10,.82) 86%,#0f0c0a)}
.ox-invite{background:linear-gradient(180deg,#0f0c0a,#211c17 45%)}
.ox-credits-end{margin:0 auto;padding:26px 16px 34px;background:#0f0c0a}