/* Israel Canada, the project page (assets/js/project.js). One screen over the homepage: the film and the
   gallery fill the screen; the ID card (left) and the guide (right, her docked panel) are frosted
   glass over it; the window between them holds the caption and the gallery strip.
   Glass rule: never animate opacity on an ancestor of a glass element (it becomes the backdrop
   root and the blur goes blank), so every glass piece fades on its own. */

@property --win-r { syntax: '<length>'; inherits: true; initial-value: 24px; }

.project {
  --edge: 24px;
  --top: 96px;
  --pid-w: clamp(340px, 24vw, 400px); /* v4 (Ori): a little narrower, as the guide beside it */
  --panel-w: clamp(380px, 22.5vw, 440px); /* the guide's docked width beside a project page (see below) */
  --win-l: calc(var(--edge) * 2 + var(--pid-w));
  --ease-agent: cubic-bezier(.22, 1, .36, 1);
  position: fixed; inset: 0; z-index: 80; color: #fff;
  transition: --win-r 620ms var(--ease-agent);
}
.project[hidden] { display: none; }
/* the window makes room for the guide while she is docked; when she is tucked away it widens */
body[data-agent-view='docked'] .project, body[data-agent-view='expanded'] .project { --win-r: calc(var(--panel-w) + var(--edge) * 2); }
/* the homepage dims while the card's picture grows over it */
.project[data-state='entering']::before {
  content: ''; position: fixed; inset: 0; background: rgba(10, 10, 10, .55);
  animation: project-dim 900ms var(--ease-standard) both;
}
@keyframes project-dim { from { opacity: 0; } }

/* ───────────── Stage: film and stills, full bleed ───────────── */
.project__media { position: absolute; inset: 0; overflow: hidden; background: #0d0d0d; }
.project[data-state='entering'] .project__media { visibility: hidden; } /* the flying picture stands in for it */
.project__poster, .project__film, .project__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project__film { opacity: 0; transition: opacity 1000ms var(--ease-standard); }
.project.film-on .project__film { opacity: 1; }
.project__still { opacity: 0; transform: scale(1.06); transition: opacity 800ms var(--ease-standard); }
.project__still.is-prev { opacity: 1; z-index: 1; transition: none; }
.project__still.is-on { opacity: 1; z-index: 2; animation: project-push 18s var(--ease-out) forwards; }
@keyframes project-push { from { transform: scale(1.06); } to { transform: scale(1); } }
.project__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, .5) 0, rgba(8, 8, 8, 0) 180px),
    linear-gradient(0deg, rgba(8, 8, 8, .45) 0, rgba(8, 8, 8, 0) 260px);
}

/* ───────────── Entrances (each piece on its own; see the glass rule above) ───────────── */
.p-in, .pid, .pid-in, .project__caption, .project__strip {
  transition: opacity 640ms var(--ease-standard), transform 900ms var(--ease-agent);
}
.project:not([data-state='open']) .p-in { opacity: 0; transform: translateY(-10px); }
.project:not([data-state='open']) .pid { opacity: 0; transform: translateX(-36px); }
.project:not([data-state='open']) .pid-in { opacity: 0; transform: translateY(10px); }
.project:not([data-state='open']) .project__caption,
.project:not([data-state='open']) .project__strip { opacity: 0; transform: translateY(16px); }
.project[data-state='open'] .p-in { transition-delay: calc(80ms + var(--i, 0) * 50ms); }
.project[data-state='open'] .pid { transition-delay: 40ms; }
.project[data-state='open'] .pid-in { transition-delay: calc(160ms + var(--i) * 45ms); }
.project[data-state='open'] .project__strip { transition-delay: 260ms; }
.project[data-state='open'] .project__caption { transition-delay: 340ms; }
.project[data-state='leaving'] :is(.p-in, .pid, .pid-in, .project__caption, .project__strip) { transition-duration: 240ms, 360ms; transition-delay: 0ms; }

/* ───────────── Top bar ───────────── */
.project__bar {
  position: absolute; z-index: 4; top: 0; inset-inline: 0; height: var(--top);
  display: flex; align-items: center; justify-content: space-between; padding-inline: var(--edge);
}
.project__nav { display: flex; align-items: center; gap: 20px; }
.project__back { gap: 8px; padding-inline: 16px 20px; }
.project__back:hover .i { transform: translateX(3px); }
.project__crumbs { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); }
.project__crumbs a { transition: color var(--d-base) var(--ease-standard); }
.project__crumbs a:hover { color: #fff; }
.project__crumbs b { color: #fff; font-weight: 700; }
.project__logo { position: absolute; left: 50%; translate: -50% 0; width: 170px; height: 17.87px; color: #fff; overflow: visible; }
.project__tools { display: flex; gap: 8px; }
.round--glass {
  background: var(--glass-subtle); color: #fff; border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-subtle);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
.round--glass:hover { background: var(--glass-regular); color: var(--ink); }

/* ───────────── The ID card ───────────── */
/* v4 (Ori: "compact the card a bit so it would be less high than the agent... no need for the extra BG beneath the
   metrics"): the card hugs its content and sits at the bottom left (Ori), its foot level with the guide's, its top
   always at least 40px below hers, so the film shows above it; what doesn't fit (a long card on a low screen) scrolls
   inside, over the CTAs. The figures stand on hairlines, without their tinted box, and the CTAs are one row. */
.pid {
  position: absolute; z-index: 4; bottom: var(--edge); left: var(--edge); width: var(--pid-w); max-height: calc(100% - var(--top) - var(--edge) - 40px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; color: var(--ink);
  background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
}
/* The content scrolls inside the card; the CTAs stay pinned in its foot (Ori, 26.10). */
.pid__scroll {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(25, 25, 25, .18) transparent;
}
.pid__scroll > * { flex-shrink: 0; }
.pid__foot { position: relative; flex: none; padding: 14px 24px 18px; border-top: 1px solid rgba(25, 25, 25, .08); }
.pid__foot::before { /* more to read above */
  content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 44px; pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  opacity: 0; transition: opacity var(--d-slow) var(--ease-standard);
}
.pid.has-more .pid__foot::before { opacity: 1; }
.pid__top { display: flex; align-items: center; justify-content: space-between; }
.pid__logo { height: 40px; width: auto; filter: brightness(0); }
.pid__save { width: 40px; height: 40px; }
.pid__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.pid__badges .badge--neutral { background: rgba(25, 25, 25, .06); }
.pid__title { margin-top: -2px; font-size: 21px; line-height: 29px; text-wrap: balance; }
.pid__where { display: flex; align-items: center; gap: 6px; margin-top: -8px; color: var(--muted-fg); }
.pid__lead { font-size: 15px; line-height: 22px; color: #2b2b2b; text-wrap: pretty; }
.pid__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.pid__facts div { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid rgba(25, 25, 25, .16); }
.pid__facts dd { margin: 0; font-size: 30px; line-height: 34px; } /* no UA indent: numbers align right with their labels */
.pid__facts dt { color: var(--muted-fg); }
.pid__amen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.pid__amen li { display: flex; align-items: center; gap: 8px; }
.pid__amen .i { flex: none; color: var(--accent-strong); }
.pid__team { display: flex; flex-direction: column; gap: 2px; }
.pid__team div { display: flex; justify-content: space-between; gap: 12px; }
.pid__team dt { color: var(--muted-fg); }
.pid__team dd { margin: 0; }
.pid__cta { position: relative; display: flex; align-items: center; gap: 8px; border-radius: 9999px; transition: box-shadow 500ms var(--ease-standard); }
.pid__cta .pill { flex: 1; min-width: 0; justify-content: center; gap: 10px; }
/* the guide says "book a meeting": the page offers the same step here */
.pid__cta-badge {
  position: absolute; top: -34px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding-inline: 10px; border-radius: 9999px; background: var(--accent-strong); color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-standard), transform 500ms var(--ease-agent); pointer-events: none;
}
.pid__cta.is-lit { box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 0 0 12px var(--accent), 0 0 24px 12px rgba(237, 16, 0, .12); }
.pid__cta.is-lit .pid__cta-badge { opacity: 1; transform: none; }

/* ───────────── Gallery: caption and strip, at the foot of the window ───────────── */
.project__gallery {
  position: absolute; z-index: 4; bottom: calc(var(--edge) + 20px); left: var(--win-l); right: var(--win-r);
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding-inline: 20px; pointer-events: none;
}
/* the caption over the strip, as wide as the strip, so the film's button can sit at its left end */
.project__deck { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
/* The film's pause and play (Ori, 2.11: "add the small playpause also to the video slides"): the hero's button (main.css
   .hero__play: "subtle and small", 32 across, 44 to the finger), at the strip's left end, level with the caption, while
   the film is the one on show. It comes in with the caption. */
.project__play {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: auto;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff;
  background: var(--glass-subtle); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease-standard), transform 900ms var(--ease-agent), visibility 0s linear 400ms, background-color var(--d-base) var(--ease-standard);
}
.project__play::before { content: ''; position: absolute; inset: -6px; }
.project__play .i { --s: 14; }
.project__icon-play, .project__play.is-paused .project__icon-pause { display: none; }
.project__play.is-paused .project__icon-play { display: block; }
.project:not([data-state='open']) .project__play { transform: translateY(16px); }
.project[data-state='open'][data-item='film'] .project__play { opacity: .72; visibility: visible; transition-delay: 0s; }
.project[data-state='open']:not(.is-settled)[data-item='film'] .project__play { transition-duration: 640ms, 900ms, 0s, var(--d-base); transition-delay: 340ms, 340ms, 0s, 0s; }
.project[data-state='open'][data-item='film'] .project__play:is(:hover, :focus-visible) { opacity: 1; background: rgba(255, 255, 255, .28); transition-delay: 0s; }
.project[data-state='leaving'] .project__play { transition-duration: 240ms, 360ms, 0s, 0s; }
.project__deck.is-tight .project__caption { align-self: flex-start; } /* the right end (RTL): clear of the button (project.js) */
.project__caption {
  display: inline-flex; align-items: center; height: 32px; padding-inline: 14px; border-radius: 9999px; pointer-events: auto;
  background: rgba(16, 16, 16, .3); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
}
.project__strip {
  display: flex; gap: 8px; max-width: 100%; padding: 8px; border-radius: 18px; pointer-events: auto;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .38), 0 24px 60px -24px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
}
.pthumb {
  position: relative; flex: 0 1 84px; min-width: 44px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px;
  opacity: .66; transition: opacity var(--d-slow) var(--ease-standard), box-shadow var(--d-slow) var(--ease-standard), transform 600ms var(--ease-agent);
}
.project[data-state='open'] .pthumb { animation: chip-rise 600ms var(--ease-agent) backwards; animation-delay: calc(300ms + var(--i) * 35ms); }
.pthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.pthumb:hover { opacity: 1; }
.pthumb:hover img { transform: scale(1.08); }
.pthumb[aria-selected='true'] { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 8px 20px -8px rgba(0, 0, 0, .6); }
.pthumb__play {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .38) 0 16px, rgba(0, 0, 0, 0) 17px);
}
.pthumb__play .i { grid-area: 1 / 1; fill: currentColor; stroke: none; transition: opacity var(--d-base) var(--ease-standard); }
.pthumb__i-pause { opacity: 0; }
/* the film is the selected item: pause on hover while it plays, play when it's paused */
.project[data-item='film']:not(.film-paused) .pthumb--film .pthumb__i-play { opacity: 0; }
.project[data-item='film']:not(.film-paused) .pthumb--film:hover .pthumb__i-pause { opacity: 1; }
.project[data-item='film']:not(.film-paused) .pthumb--film:not(:hover) .pthumb__play { background: none; }
.pthumb__progress { position: absolute; inset: auto 0 0; height: 3px; background: rgba(255, 255, 255, .25); }
.pthumb__progress i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 100% 50%; }

/* ───────────── The guide on the project page: frosted glass, no scrim, docked as the right column ───────────── */
.project-open .agent { --panel-w: clamp(380px, 22.5vw, 440px); } /* narrower than on the homepage (Ori, 26.10; v4 narrower again) */
.project-open .agent__tools { gap: 0; }
.project-open .agent__tool { width: 36px; height: 36px; }
.project-open .agent[data-view='docked'] .agent__scrim { opacity: 0; visibility: hidden; }
.project-open .agent[data-mode='chat'] .agent__panel,
.project-open .agent[data-mode='voice'] .agent__panel {
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
}
.project-open .agent__head { border-bottom-color: rgba(25, 25, 25, .08); }
.project-open .agent__composer { background: rgba(255, 255, 255, .55); border-color: rgba(25, 25, 25, .1); }
.project-open .agent__composer:focus-within { background: #fff; }
.project-open .agent__voice { background: radial-gradient(80% 60% at 50% 38%, rgba(255, 247, 244, .6) 0%, rgba(255, 255, 255, 0) 70%); }
.project-open .suggestions { flex-wrap: wrap; overflow: visible; } /* all follow-ups in view beside the page */
/* Light chips on the light panel (chat and voice). The video call keeps its dark glass chips, and
   hover and the picked state keep their own colours. */
:where(.project-open) :is(.choices, .suggestions, .voice__choices) .choice:not([aria-pressed='true'], :hover:enabled) { background-color: rgba(255, 255, 255, .6); }
.project-open .cursor { opacity: 0 !important; }

/* ───────────── The picture that flies between a card and the page ───────────── */
.project-morph { position: fixed; z-index: 88; overflow: hidden; pointer-events: none; background: #0d0d0d; will-change: left, top, width, height, clip-path; }
.project-morph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-morph__veil {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(58% 58% at 50% 50%, rgba(10, 10, 10, .24), rgba(10, 10, 10, 0)), rgba(10, 10, 10, .28);
  opacity: 0; transition: opacity 520ms var(--ease-standard);
}
.project-morph.has-veil .project-morph__veil { opacity: 1; }
.project-morph.has-veil.is-flying .project-morph__veil { opacity: 0; }
.project-morph__veil .brand-logo { opacity: 1; transform: none; transition: none; }
.project-morph__card { z-index: 0; }
.project-morph > img:last-of-type { z-index: 1; transition: opacity 520ms var(--ease-standard) 300ms; }
.project-morph.is-landing > img:last-of-type { opacity: 0; }
.project-morph__veil { z-index: 2; }

/* Shorter screens (1440x900 and the like): the card tightens; what doesn't fit scrolls above the CTAs. */
@media (max-height: 960px) {
  .pid__scroll { gap: 10px; padding: 18px 22px 14px; }
  .pid__foot { padding: 12px 22px 16px; }
  .pid__amen { row-gap: 4px; }
  .pid__logo { height: 36px; }
  .pid__title { font-size: 20px; line-height: 28px; }
  .pid__facts { row-gap: 8px; }
  .pid__facts div { padding-top: 8px; }
  .pid__facts dd { font-size: 30px; line-height: 34px; }
  .pid__cta .pill--l { height: 48px; }
  .pid__cta .round--l { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .project, .p-in, .pid, .pid-in, .project__caption, .project__strip, .pthumb, .project__play { transition-duration: 1ms !important; animation: none !important; }
  .project__still.is-on { animation: none; transform: none; }
}