/* ═══════════════════════════════════════════════════════════════════════
   Hrachik Kocharyan — actor
   The page is a dark room. Things exist only while something is lighting
   them. There are no boxes, no borders and no accent colour: every warm
   tone on the screen comes out of a photograph.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --black:      #000;
  --bone:       #e9e4da;
  --bone-dim:   rgba(233,228,218,.54);
  --bone-ghost: rgba(233,228,218,.26);
  --bone-faint: rgba(233,228,218,.12);
  --bone-mark:  rgba(233,228,218,.19);
  --bone-read:  rgba(233,228,218,.46);

  --display: "Noto Serif Armenian", "Noto Serif", Georgia, serif;
  --text:    "Noto Sans Armenian", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--black); scroll-behavior:smooth; overflow-x:clip; }

body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--text);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }

::selection{ background:var(--bone); color:var(--black); }

a{ color:inherit; }

:focus-visible{
  outline:1px solid var(--bone);
  outline-offset:6px;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:99;
  padding:12px 18px; background:var(--bone); color:var(--black);
  font-size:.85rem; text-decoration:none;
}
.skip:focus{ top:16px; }

/* ── film grain ────────────────────────────────────────────────────────
   Not decoration: flat black gradients band badly on cheap panels, and
   the grain hides it while matching the source footage.                */
.grain{
  position:fixed; inset:-120px; z-index:60; pointer-events:none;
  opacity:.16; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='200' height='200' filter='url(%23n)' opacity='.42'/></svg>");
  animation:grain 5s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-14px,7px)}
  40%{transform:translate(9px,-11px)} 60%{transform:translate(-7px,13px)}
  80%{transform:translate(12px,5px)}  100%{transform:translate(0,0)}
}

/* ── persistent chrome ─────────────────────────────────────────────── */
.mark{
  position:fixed; top:26px; left:30px; z-index:50;
  font-family:var(--display); font-weight:300; font-size:.95rem;
  letter-spacing:.01em;
  opacity:.62;
  transition:opacity .8s ease, transform .8s ease;
}
html.beam .mark{ opacity:0; transform:translateY(-6px); pointer-events:none; }
html.beam .mark.on{ opacity:.62; transform:none; pointer-events:auto; }
.mark a{ text-decoration:none; }
.mark a:hover{ opacity:1; }

.index{
  position:fixed; right:30px; top:50%; translate:0 -50%; z-index:50;
  display:grid; gap:1.15rem; justify-items:end;
  transition:opacity .8s ease;
}
html.beam .index{ opacity:0; pointer-events:none; }
html.beam .index.on{ opacity:1; pointer-events:auto; }
.index a{
  display:grid; justify-items:end; gap:.15rem;
  text-decoration:none; opacity:.24;
  transition:opacity .5s ease;
}
.index a:hover{ opacity:.7; }
.index a.here{ opacity:1; }
.index span{ font-family:var(--display); font-size:1rem; line-height:1; }
.index i{ font-style:normal; font-size:.6rem; letter-spacing:.06em; opacity:.5; }

/* ── the exposure system ───────────────────────────────────────────────
   Every figure carries --lit (0…1), written by the scroll loop. It is the
   beam: full at the middle of the viewport, gone at the edges.          */
/* The page is a dark room, so every hiding rule below is gated behind
   html.beam, which main.js only adds once it is actually driving the light.
   Without JavaScript, or if anything goes wrong before it starts, nothing
   is hidden and the whole site simply reads as a black page with pictures
   on it. Never hide something the script is the only way to bring back. */
[data-figure]{ --lit:1; --drift:0; }

html.beam [data-figure]{
  --lit:0;
  opacity:calc(.04 + .96 * var(--lit));
  transform:translate3d(0, calc(var(--drift) * (1 - var(--lit)) * 1px), 0);
  will-change:opacity, transform;
}

html.beam [data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity 1.3s cubic-bezier(.19,1,.22,1),
             transform 1.3s cubic-bezier(.19,1,.22,1);
}
html.beam [data-reveal].lit{ opacity:1; transform:none; }

/* ── 1 · the light finds him ───────────────────────────────────────── */
.curtain{
  position:relative; min-height:100svh;
  display:grid; align-content:end; justify-items:start;
  padding:0 clamp(20px,5vw,72px) clamp(46px,8vh,92px);
  overflow:hidden;
}

/* The opening figure is also the way to hear him. These carry the .watch
   class too, so they are written at matching specificity to win over the
   generic button rules further down. */
.watch.curtain-watch{
  position:absolute; z-index:0;
  right:clamp(10px,6vw,140px); bottom:-4svh;
  height:min(98svh,900px); width:auto;
}
.watch.curtain-watch .watch-cue{ bottom:1.5svh; opacity:.5; }
html.beam .watch.curtain-watch .watch-cue{ opacity:0; }
html.beam .lights .watch.curtain-watch .watch-cue{ opacity:.5; transition:opacity 1.2s ease 2.1s, color .5s ease; }
.watch.curtain-watch:hover .watch-cue,
.watch.curtain-watch:focus-visible .watch-cue{ opacity:1; }
.watch.curtain-watch video{ height:100%; width:auto; }

.curtain-figure{
  height:100%; width:auto;
  object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 50% 54% at 50% 43%, #000 46%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 54% at 50% 43%, #000 46%, transparent 100%);
}
html.beam .curtain-figure{ opacity:0; transition:opacity 2.4s ease; }
html.beam .curtain-figure.on{ opacity:1; }

.curtain-name{
  position:relative; z-index:1;
  margin:0;
  font-family:var(--display); font-weight:200;
  font-size:clamp(3.1rem, 11.5vw, 11rem);
  line-height:.9; letter-spacing:-.022em;
  max-width:14ch;
}
.curtain-name .l{ display:block; }
html.beam .curtain-name .l{
  opacity:0; transform:translateY(.16em);
  filter:blur(9px);
  transition:opacity 1.5s cubic-bezier(.19,1,.22,1) calc(var(--d) * .22s + .5s),
             transform 1.7s cubic-bezier(.19,1,.22,1) calc(var(--d) * .22s + .5s),
             filter 1.9s cubic-bezier(.19,1,.22,1) calc(var(--d) * .22s + .5s);
}
html.beam .lights .curtain-name .l{ opacity:1; transform:none; filter:none; }

.curtain-sub{
  position:relative; z-index:1;
  margin:1.9rem 0 0; display:grid; gap:.34rem;
  font-size:.86rem; letter-spacing:.03em;
}
html.beam .curtain-sub{ opacity:0; transition:opacity 1.4s ease 1.35s; }
html.beam .lights .curtain-sub{ opacity:1; }
.curtain-sub .latin{ color:var(--bone-dim); }
.curtain-sub .role{ color:var(--bone-ghost); }

/* ── 2 · a held pause ──────────────────────────────────────────────── */
.pause{
  min-height:78svh;
  display:grid; align-items:center;
  padding:14vh clamp(20px,5vw,72px);
}
.held{
  margin:0 0 0 auto;
  max-width:31ch;
  font-family:var(--display); font-weight:200;
  font-size:clamp(1.35rem,2.5vw,2.15rem);
  line-height:1.5; letter-spacing:-.008em;
  color:var(--bone-dim);
  text-align:left;
  margin-right:clamp(0px,10vw,180px);
}

/* ── chapter marks ─────────────────────────────────────────────────── */
.chapter{
  position:relative; z-index:4;
  margin:0; padding:0 clamp(20px,5vw,72px);
  display:grid; gap:.3rem; justify-items:start;
  font-weight:200;
}
.chapter span{
  font-family:var(--display);
  font-size:clamp(2.6rem,7vw,6.2rem);
  line-height:.95; letter-spacing:-.02em;
  color:var(--bone-mark);
}
.chapter i{
  font-style:normal; font-size:.72rem; letter-spacing:.14em;
  color:var(--bone-read);
}
/* clear of the running order pinned to the right edge */
.chapter-right{ justify-items:end; text-align:right; }
.chapter-small span{ font-size:clamp(1.9rem,4vw,3.4rem); }

/* On wide screens the running order is pinned to the right edge, so every
   section that lays content out across the full width keeps a lane clear of
   it. Below 900px the index is hidden and the lane is given back. */
@media (min-width:901px){
  .stage, .cinema, .rehearsal, .casting{ padding-right:clamp(72px,11vw,175px); }
}

/* ── 3 · stage ─────────────────────────────────────────────────────────
   A 24 column field. Each figure names its own start column, span and row,
   so placement stays deliberate and irregular while the flow guarantees the
   section never opens into an empty screen.                              */
.stage{
  position:relative;
  padding:4vh clamp(20px,5vw,72px) 6vh;
  display:grid;
  grid-template-columns:repeat(24,1fr);
  align-items:start;
}
.stage > *{
  grid-column:var(--c,1) / span var(--s,24);
  grid-row:var(--r,auto);
  margin:calc(var(--mt,0) * 1vh) 0 0;
  z-index:var(--z,1);
}
.stage .fig img{ width:100%; height:auto; }
.stage video.fig{ width:100%; height:auto; }
.stage video.fig{ max-width:100%; }
.stage .chapter{ padding:0; }

.aside{
  font-size:1rem; line-height:1.75;
  color:var(--bone-dim);
  align-self:center;
}
.aside-wide{ max-width:34ch; }

/* ── 4 · one long look ─────────────────────────────────────────────── */
.apparition{
  display:grid; place-items:center;
  padding:16vh clamp(20px,5vw,72px) 12vh;
}

/* apertures — light through differently shaped openings.
   The radii stay at or under 50% so the alpha actually reaches zero before
   the element's edge; anything larger leaves a visible straight border. */
.ap-oval{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 48%, #000 60%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 48%, #000 50%, transparent 100%);
}
.ap-slit{
  -webkit-mask-image:radial-gradient(ellipse 38% 50% at 50% 45%, #000 42%, transparent 100%);
          mask-image:radial-gradient(ellipse 38% 50% at 50% 45%, #000 42%, transparent 100%);
}
.ap-band{
  -webkit-mask-image:radial-gradient(ellipse 50% 46% at 50% 50%, #000 62%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 42% at 50% 50%, #000 46%, transparent 100%);
}
.ap-soft{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 64%, transparent 100%);
}

.watch{
  position:relative; display:block;
  padding:0; margin:0; border:0; background:none;
  color:inherit; font:inherit; cursor:pointer;
  -webkit-appearance:none;
}
.watch video{ width:100%; height:auto; }
.watch-cue{
  position:absolute; left:50%; bottom:6%; translate:-50% 0;
  font-size:.7rem; letter-spacing:.15em;
  color:var(--bone-dim);
  opacity:.55; transition:opacity .55s ease, color .55s ease;
  pointer-events:none;
}
.watch:hover .watch-cue,
.watch:focus-visible .watch-cue{ opacity:1; color:var(--bone); }

.apparition .watch{ width:min(40vw,620px); }

/* ── 5 · cinema ────────────────────────────────────────────────────── */
.cinema{
  position:relative;
  padding:2vh clamp(20px,5vw,72px) 12vh;
  display:grid; gap:clamp(8vh,12vh,17vh);
}
.cinema .chapter{ margin-bottom:-4vh; }
.work{ display:grid; align-items:end; gap:2.2rem; }
.work-a{ grid-template-columns:minmax(0,1.1fr) minmax(0,.62fr); }
.work-b{ grid-template-columns:minmax(0,.5fr) minmax(0,1fr); margin-left:auto; width:min(100%,980px); }
.work-b .watch{ order:2; }
.work-b .credit{ order:1; align-self:center; }
.work-c{ grid-template-columns:minmax(0,.75fr) minmax(0,.5fr); width:min(100%,820px); }

.credit h3{
  margin:0 0 .3rem;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.5rem,3.1vw,2.6rem);
  line-height:1.08; letter-spacing:-.015em;
}
.credit .translit{ color:var(--bone-dim); margin:0 0 1.15rem; font-size:.95rem; }
.credit p{ margin:0 0 .34rem; font-size:.88rem; line-height:1.7; color:var(--bone-read); }

/* ── 6 · rehearsal: glimpsed ───────────────────────────────────────── */
.rehearsal{
  position:relative;
  padding:8vh clamp(20px,5vw,72px) 16vh;
  display:grid; gap:3rem;
  grid-template-columns:repeat(12,1fr);
  align-items:start;
}
.rehearsal .chapter{ grid-column:1/6; padding:0; }
.rehearsal .aside-wide{ grid-column:1/5; }
.reh{ opacity:.55; }
.reh-a{ grid-column:6/11; width:100%; }
.reh-b{ grid-column:2/6; width:100%; margin-top:14vh; }
.reh-c{ grid-column:8/13; margin:6vh 0 0; }
.reh-c img{ width:100%; height:auto; }

/* ── 7 · casting ───────────────────────────────────────────────────── */
.casting{
  padding:6vh clamp(20px,5vw,72px) 12vh;
  display:grid; gap:5vh;
}
.rank{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  gap:clamp(10px,3vw,48px);
}
.rank .fig{ margin:0; }
.rank .fig img{ width:100%; height:auto; }
.rank .fig:nth-child(1){ margin-bottom:-3vh; }
.rank .fig:nth-child(2){ margin-bottom:5vh; }
.rank .fig:nth-child(3){ margin-bottom:1vh; }
.rank .fig:nth-child(4){ margin-bottom:8vh; }

/* ── 8 · contact ───────────────────────────────────────────────────── */
.contact{
  padding:14vh clamp(20px,5vw,72px) 16vh;
  display:grid; gap:1.6rem; justify-items:center; text-align:center;
}
.contact-lead{ margin:0; font-size:.8rem; letter-spacing:.16em; color:var(--bone-read); }
.contact-mail{
  font-family:var(--display); font-weight:200;
  font-size:clamp(1.6rem,6vw,4.4rem);
  letter-spacing:-.02em; text-decoration:none;
  color:var(--bone-dim);
  transition:color .6s ease;
  word-break:break-word;
}
.contact-mail:hover{ color:var(--bone); }

/* the other two ways to reach him, kept quiet under the address */
.contact-else{
  display:grid; gap:.55rem; justify-items:center;
  margin-top:.4rem;
  font-size:.85rem; letter-spacing:.03em;
}
.contact-else a{
  color:var(--bone-read); text-decoration:none;
  transition:color .5s ease;
}
.contact-else a:hover{ color:var(--bone-dim); }
.contact-tail{
  margin:2.4rem 0 0; display:grid; gap:.3rem;
  font-size:.78rem; color:var(--bone-faint); letter-spacing:.04em;
}

/* ── the scene player ──────────────────────────────────────────────── */
.viewer{
  position:fixed; inset:0; z-index:80;
  background:var(--black);
  display:grid; place-items:center;
  padding:clamp(16px,4vw,52px);
  opacity:0; transition:opacity .5s ease;
}
.viewer.on{ opacity:1; }
.viewer[hidden]{ display:none; }
.viewer video{
  max-width:min(100%,1100px); max-height:82svh;
  width:100%; height:auto;
  background:var(--black);
}
.viewer-close{
  position:absolute; top:clamp(14px,3vw,34px); right:clamp(14px,3vw,34px);
  border:0; background:none; color:var(--bone-dim);
  font:inherit; font-size:.78rem; letter-spacing:.14em;
  cursor:pointer; padding:10px;
}
.viewer-close:hover{ color:var(--bone); }
.viewer-title{
  position:absolute; top:clamp(16px,3vw,36px); left:clamp(16px,3vw,36px);
  margin:0; font-family:var(--display); font-size:.95rem; color:var(--bone-dim);
}

/* ── narrower screens: keep the irregularity, drop the absolutes ───── */
@media (max-width:900px){
  .index{ display:none; }
  .mark{ top:18px; left:20px; font-size:.82rem; }

  .curtain{ align-content:end; }
  .watch.curtain-watch{ right:-2vw; height:70svh; }
  .curtain-figure{ opacity:.85; }
  .curtain-figure.on{ opacity:.9; }
  .curtain-name{ max-width:none; }

  .held{ margin-right:0; max-width:26ch; }

  .stage{ display:grid; grid-template-columns:1fr; gap:7vh; padding:4vh clamp(20px,5vw,72px) 5vh; }
  .stage > *{ grid-column:1; grid-row:auto; margin:0; }
  .stage .fig:nth-of-type(2n){ margin-left:20vw; }
  .stage .fig:nth-of-type(3n){ margin-right:18vw; }
  .stage .fig:nth-of-type(4n){ margin-left:9vw; margin-right:9vw; }
  .aside{ max-width:30ch; }

  .apparition .watch{ width:min(86vw,520px); }

  .work-a,.work-b,.work-c{ grid-template-columns:1fr; width:auto; margin:0; }
  .work-b .watch{ order:1; }
  .work-b .credit{ order:2; }
  .work-b,.work-c{ justify-items:start; }

  .rehearsal{ display:grid; grid-template-columns:1fr; gap:6vh; }
  .rehearsal video{ width:100%; height:auto; }
  .rehearsal .chapter,.rehearsal .aside-wide,
  .reh-a,.reh-b,.reh-c{ grid-column:auto; margin:0; width:auto; }
  /* a replaced element resolves width:100% against the full containing
     block, so the offset has to come out of the width as well */
  .rehearsal .reh-b{ margin-left:18vw; width:calc(100% - 18vw); }
  .rehearsal .reh-c{ margin-right:14vw; width:calc(100% - 14vw); }

  .casting{ padding:6vh clamp(20px,5vw,72px) 10vh; }
  .rank{ grid-template-columns:repeat(2,1fr); gap:6vw; }
  .rank .fig:nth-child(n){ margin-bottom:0; }
  .rank .fig:nth-child(2){ margin-top:7vh; }
  .rank .fig:nth-child(3){ margin-top:-2vh; }
  .rank .fig:nth-child(4){ margin-top:5vh; }
}

@media (max-width:520px){
  .watch.curtain-watch{ height:58svh; right:-1vw; }
  .stage .fig:nth-of-type(2n){ margin-left:12vw; }
  .stage .fig:nth-of-type(3n){ margin-right:10vw; }
}

/* ── respect the setting ───────────────────────────────────────────── */
/* Under reduced motion main.js never adds html.beam, so nothing above is
   hiding anything and there is only the ambient movement left to stop. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain{ animation:none; }
  .mark,.index{ transition:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}