/* =================================================================
   GABRIELA JUNQUEIRA — PORTFOLIO VOL. 01
   An editorial print object. Hard edges, hairlines, registration marks.
   ================================================================= */

:root{
  --ink:#16120f;
  --ink-soft:#2a2420;
  --paper:#ece6da;
  --paper-2:#e4ddce;
  --paper-3:#d8cfbc;
  --scarlet:#e4253b;
  --blush:#ef6f9b;
  --rule:rgba(22,18,15,.22);
  --rule-soft:rgba(22,18,15,.12);
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --pad:clamp(18px,4.5vw,64px);
  --frame:clamp(10px,1.6vw,20px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--scarlet);color:var(--paper)}
a:focus-visible,button:focus-visible,.tile:focus-visible{outline:1px solid var(--scarlet);outline-offset:3px}
.menu-btn:focus-visible,.book-mail:focus-visible{outline-color:var(--paper)}

/* ---------- printer frame + crop marks (always visible) ---------- */
.frame{
  position:fixed;inset:var(--frame);
  border:1px solid #999;
  mix-blend-mode:difference;
  pointer-events:none;z-index:90;
}
.cm{position:absolute;width:13px;height:13px;mix-blend-mode:normal}
.cm::before,.cm::after{content:"";position:absolute;background:#999;mix-blend-mode:difference}
.cm::before{width:13px;height:1px;top:0;left:0}
.cm::after{height:13px;width:1px;top:0;left:0}
.cm-tl{top:-7px;left:-7px}
.cm-tr{top:-7px;right:-7px}.cm-tr::before{left:auto;right:0}.cm-tr::after{left:auto;right:0}
.cm-bl{bottom:-7px;left:-7px}.cm-bl::before{top:auto;bottom:0}.cm-bl::after{top:auto;bottom:0}
.cm-br{bottom:-7px;right:-7px}.cm-br::before{top:auto;bottom:0;left:auto;right:0}.cm-br::after{top:auto;bottom:0;left:auto;right:0}

/* ---------- rotated spines ---------- */
.spine{
  position:fixed;top:50%;z-index:88;
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:#999;mix-blend-mode:difference;
  white-space:nowrap;pointer-events:none;
}
.spine-l{left:calc(var(--frame) - 4px);transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.spine-r{right:calc(var(--frame) - 4px);transform:translateY(50%) rotate(90deg);transform-origin:right center}
@media (max-width:760px){.spine{display:none}}

/* ---------- grain overlay ---------- */
.grain{
  position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- menu ---------- */
.menu-btn{
  position:fixed;top:calc(var(--frame) + 12px);right:calc(var(--frame) + 14px);
  z-index:120;width:34px;height:24px;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;mix-blend-mode:difference;
}
.menu-btn span{display:block;height:1.6px;width:100%;background:#fff;transition:.35s cubic-bezier(.6,0,.2,1)}
.menu-btn.open span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
.menu{
  position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;
}
.menu.open{opacity:1;visibility:visible}
.menu ul{list-style:none;text-align:center}
.menu li{overflow:hidden}
.menu a{
  font-family:var(--serif);font-size:clamp(34px,7vw,76px);line-height:1.08;
  display:block;padding:.04em var(--pad);color:var(--paper);position:relative;
  transform:translateY(110%);transition:transform .6s cubic-bezier(.6,0,.2,1);
}
.menu.open a{transform:translateY(0)}
.menu li:nth-child(1) a{transition-delay:.05s}
.menu li:nth-child(2) a{transition-delay:.10s}
.menu li:nth-child(3) a{transition-delay:.15s}
.menu li:nth-child(4) a{transition-delay:.20s}
.menu li:nth-child(5) a{transition-delay:.25s}
.menu li:nth-child(6) a{transition-delay:.30s}
.menu li:nth-child(7) a{transition-delay:.35s}
.menu li:nth-child(8) a{transition-delay:.40s}
.menu a::before{
  content:attr(data-n);font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--scarlet);position:absolute;left:clamp(8px,4vw,60px);top:50%;transform:translateY(-50%);
}
.menu a:hover{color:var(--scarlet);font-style:italic}
.menu-mail{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;margin-top:6vh;
  border-bottom:1px solid var(--scarlet);padding-bottom:3px;opacity:0;transition:opacity .5s .5s
}
.menu.open .menu-mail{opacity:1}

/* ============================ COVER ============================ */
.cover{
  position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--ink);
  display:grid;grid-template-columns:minmax(300px,42vw) 1fr;
}
.cover::before{ /* faint top scrim so the metadata row stays legible over the photo */
  content:"";position:absolute;top:0;left:0;right:0;height:90px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,7,.5),rgba(10,8,7,0));
}
.cover-top{
  position:absolute;top:calc(var(--frame) + 14px);left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;padding:0 calc(var(--pad) + 6px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper);
}
.cover-top span:nth-child(2){opacity:.7}
@media (max-width:600px){.cover-top span:nth-child(2){display:none}}
.cover-panel{
  grid-column:1;position:relative;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);padding-bottom:clamp(34px,7vh,80px);color:var(--paper);
}
.cover-img{position:relative;grid-column:2;overflow:hidden;will-change:transform;margin:0}
.cover-img img{height:100%;transform:scale(1.03);object-position:50% 8%}
.cover-veil{position:absolute;inset:0;display:none}
.cover-mast{color:var(--paper)}
.cover-kicker{
  font-family:var(--mono);font-size:clamp(10px,1.3vw,13px);letter-spacing:.42em;
  text-transform:uppercase;margin-bottom:.7em;padding-left:.3em;
}
.mast{
  font-family:var(--serif);font-weight:400;line-height:.82;
  font-size:clamp(50px,9vw,128px);letter-spacing:-.022em;
}
/* Bodoni optical polish on the big display type */
.mast,.ch-title,.gallery-head h2,.book-h,.card-name,.menu a{
  font-optical-sizing:auto;font-variation-settings:"opsz" 72;text-wrap:balance;
}
.mast .l1,.mast .l2{display:block}
.mast .l2{font-style:italic;font-weight:400;margin-left:.06em;
  -webkit-text-stroke:1px var(--paper);color:transparent;
  text-shadow:none;}
@supports not (-webkit-text-stroke:1px var(--paper)){.mast .l2{color:var(--paper)}}
.reveal-line{overflow:hidden}
.cover-sub{
  font-family:var(--sans);font-weight:400;letter-spacing:.02em;
  font-size:clamp(13px,1.7vw,18px);margin-top:1.1em;max-width:34ch;
}
.cover-scroll{
  margin-top:clamp(22px,4.5vh,46px);z-index:6;
  display:inline-flex;align-items:center;gap:12px;color:var(--paper);align-self:flex-start;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
}
.cover-scroll i{display:block;width:1px;height:42px;background:rgba(236,230,218,.5);position:relative;overflow:hidden}
.cover-scroll i::after{content:"";position:absolute;top:-42px;left:0;width:1px;height:42px;background:var(--scarlet);animation:drip 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes drip{0%{top:-42px}55%,100%{top:42px}}

/* ---- cover: mobile = full-bleed photo with masthead overlaid ---- */
@media (max-width:820px){
  .cover{display:block}
  .cover-img{position:absolute;inset:0;width:100%}
  .cover-img img{object-position:50% 8%;transform:scale(1.02)}
  .cover-veil{display:block;background:linear-gradient(180deg,rgba(10,8,7,.28) 0%,rgba(10,8,7,0) 30%,rgba(10,8,7,.12) 55%,rgba(10,8,7,.82) 100%)}
  .cover-panel{position:absolute;inset:0;z-index:3;justify-content:flex-end;padding-bottom:clamp(40px,9vh,90px)}
  .mast{font-size:clamp(56px,17vw,128px)}
}

/* ============================ MARQUEE ============================ */
.marquee{
  background:var(--ink);color:var(--paper);overflow:hidden;
  border-top:1px solid #000;border-bottom:1px solid #000;
  padding:14px 0;white-space:nowrap;
}
.marquee-row{display:inline-flex;align-items:center;animation:scroll 38s linear infinite;will-change:transform}
.marquee span{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,3.4vw,40px);
  padding:0 .5em;
}
.marquee b{color:var(--scarlet);font-size:clamp(12px,1.6vw,18px);transform:translateY(-.18em)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ STATEMENT ============================ */
.statement{
  display:grid;grid-template-columns:minmax(180px,.62fr) 1.38fr;gap:clamp(24px,5vw,90px);
  padding:clamp(60px,11vw,150px) var(--pad);align-items:start;
  border-bottom:1px solid var(--rule);
}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--scarlet)}
.st-index ol{list-style:none;margin:1.4em 0;border-top:1px solid var(--rule)}
.st-index li{
  display:flex;gap:1em;align-items:baseline;padding:.7em 0;border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:13px;
}
.st-index li span{font-family:var(--mono);color:var(--scarlet);font-size:11px}
.st-meta{font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
.st-body .lead{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.5vw,46px);
  line-height:1.18;letter-spacing:-.01em;text-indent:0;
}
.drop{
  float:left;font-family:var(--serif);font-weight:700;font-size:3.4em;line-height:.74;
  padding:.04em .12em 0 0;color:var(--scarlet);
}
.st-body p+p{margin-top:1.1em}
.st-body .reveal:not(.lead){
  font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.7vw,19px);line-height:1.6;max-width:58ch;
}
.st-sign{font-family:var(--serif);font-style:italic;color:var(--scarlet)!important;font-size:clamp(16px,1.9vw,22px)!important;margin-top:1.6em!important}
@media (max-width:780px){.statement{grid-template-columns:1fr}}

/* ============================ CHAPTERS ============================ */
.chapter{
  position:relative;min-height:104svh;padding:clamp(60px,9vw,120px) var(--pad);
  display:grid;align-items:center;overflow:hidden;
  grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:clamp(20px,4vw,60px);
}
.ch-num{
  position:absolute;top:.1em;font-family:var(--serif);font-weight:500;
  font-size:clamp(140px,30vw,460px);line-height:.7;color:transparent;
  -webkit-text-stroke:1px var(--rule);z-index:0;pointer-events:none;
}
.ch-vert{
  position:absolute;font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.5em;font-size:clamp(11px,1.2vw,14px);writing-mode:vertical-rl;z-index:3;
}
.ch-lead{position:relative;z-index:2;aspect-ratio:3/4;max-height:82svh;justify-self:center;width:100%;max-width:560px;overflow:hidden}
.ch-sec{
  position:absolute;z-index:4;width:clamp(150px,21vw,280px);aspect-ratio:2/3;
  box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;
}
.ch-copy{position:relative;z-index:3;max-width:42ch}
.ch-tag{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--scarlet);margin-bottom:.4em}
.ch-title{font-family:var(--serif);font-weight:500;font-size:clamp(44px,8vw,108px);line-height:.92;letter-spacing:-.01em;margin-bottom:.4em}
.ch-text{font-size:clamp(15px,1.7vw,19px);line-height:1.6;max-width:40ch;margin-bottom:1.7em}
.ch-spec{
  display:flex;gap:1.2em;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  padding:.6em 0;border-top:1px solid var(--rule);text-transform:uppercase;
}
.ch-spec:last-child{border-bottom:1px solid var(--rule)}
.ch-spec span{color:var(--scarlet);min-width:6.5em;font-size:10.5px;align-self:center;letter-spacing:.16em}

/* NOIR — image left, copy right */
.ch-noir{background:var(--paper)}
.ch-noir .ch-num{left:-.04em;color:transparent}
.ch-noir .ch-vert{right:calc(var(--frame) + 6px);top:50%;transform:translateY(-50%)}
.ch-noir .ch-lead{grid-column:1}
.ch-noir .ch-copy{grid-column:2}
.ch-noir .ch-sec{right:clamp(2%,8vw,12%);bottom:clamp(40px,8vh,90px)}

/* DAYLIGHT — copy left, image right, cooler paper */
.ch-day{background:var(--paper-2)}
.ch-day .ch-num{right:-.04em}
.ch-day .ch-vert{left:calc(var(--frame) + 6px);top:50%;transform:translateY(-50%) rotate(180deg)}
.ch-day .ch-lead{grid-column:2;order:2}
.ch-day .ch-copy{grid-column:1;order:1}
.ch-day .ch-lead img{filter:grayscale(1) contrast(1.06)}
.ch-day .ch-sec{left:clamp(2%,7vw,11%);top:clamp(40px,9vh,90px)}

/* SCARLET — inverted, dark ground, the showpiece */
.ch-scarlet{background:var(--ink);color:var(--paper)}
.ch-scarlet .ch-num{left:-.04em;-webkit-text-stroke:1px rgba(236,230,218,.16)}
.ch-scarlet .ch-vert{right:calc(var(--frame) + 6px);top:50%;transform:translateY(-50%);color:var(--scarlet)}
.ch-scarlet .ch-lead{grid-column:1}
.ch-scarlet .ch-copy{grid-column:2}
.ch-scarlet .ch-sec{right:clamp(2%,8vw,12%);bottom:clamp(40px,8vh,90px);box-shadow:0 24px 70px rgba(0,0,0,.6)}
.ch-scarlet .ch-spec{border-color:rgba(236,230,218,.2)}
.ch-scarlet .ch-title{color:var(--paper)}

@media (max-width:820px){
  .chapter{grid-template-columns:1fr;min-height:auto;gap:30px;padding-top:clamp(70px,14vw,110px);padding-bottom:clamp(70px,14vw,110px)}
  .chapter .ch-lead{grid-column:1!important;order:1!important;max-width:460px;max-height:none}
  .chapter .ch-copy{grid-column:1!important;order:2!important;max-width:46ch}
  .ch-sec{position:relative!important;inset:auto!important;width:clamp(140px,40vw,220px)!important;margin-top:-60px;margin-left:auto;margin-right:4vw;z-index:5}
  .ch-day .ch-sec{margin-left:4vw;margin-right:auto}
  .ch-vert{display:none}
}

/* ============================ GALLERY / MOSAIC ============================ */
.gallery-wrap{padding:clamp(60px,10vw,130px) var(--pad);background:var(--paper)}
.gallery-head{margin-bottom:clamp(30px,5vw,60px);display:grid;gap:.3em;border-bottom:1px solid var(--rule);padding-bottom:1.4em}
.gallery-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.01em}
.gallery-note{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(190px,15vw,290px);gap:clamp(8px,1vw,16px);
  counter-reset:frame;
}
.tile{position:relative;overflow:hidden;background:var(--paper-3);grid-row:span 1;min-height:0;counter-increment:frame}
.tile img{transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.96)}
.tile::before{ /* always-visible issue-style frame number, no box */
  content:counter(frame,decimal-leading-zero);position:absolute;top:9px;left:10px;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#fff;mix-blend-mode:difference;pointer-events:none;
}
.tile::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .4s;pointer-events:none}
.tile:hover img{transform:scale(1.025)}
.tile:hover::after{border-color:var(--scarlet)}
.cap{
  position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);padding:6px 9px;
  transform:translateY(101%);transition:transform .4s cubic-bezier(.6,0,.2,1);
}
.tile:hover .cap{transform:translateY(0)}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile.tall{grid-row:span 2}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(3,1fr)}.tile.big{grid-column:span 2}}
@media (max-width:600px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:60vw}
  .tile.big,.tile.wide{grid-column:span 2}.tile.big{grid-row:span 2}.tile.tall{grid-row:span 1}
  .cap{transform:translateY(0);font-size:9px;padding:4px 6px;background:rgba(22,18,15,.78)}
}

/* ============================ COMP CARD ============================ */
.card{
  display:grid;grid-template-columns:minmax(220px,.7fr) 1fr;align-items:stretch;
  border-top:1px solid var(--rule);
}
.card-photo{aspect-ratio:3/4;overflow:hidden;border-right:1px solid var(--rule)}
.card-sheet{padding:clamp(40px,6vw,86px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.card-kick{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--scarlet);margin-bottom:1em}
.card-name{font-family:var(--serif);font-weight:500;font-size:clamp(42px,7vw,92px);line-height:.9;margin-bottom:.7em;letter-spacing:-.01em}
.card-specs{border-top:1px solid var(--rule)}
.card-specs>div{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr;gap:1em;padding:.85em 0;border-bottom:1px solid var(--rule)}
.card-specs dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--scarlet);align-self:center}
.card-specs dd{font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.5vw,17px);letter-spacing:.01em}
.card-specs a{border-bottom:1px solid var(--scarlet);padding-bottom:1px}
.card-foot{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);margin-top:1.4em;text-transform:uppercase}
@media (max-width:780px){.card{grid-template-columns:1fr}.card-photo{aspect-ratio:4/5;border-right:0;border-bottom:1px solid var(--rule);max-height:70svh}}

/* ============================ BOOKINGS ============================ */
.book{
  background:var(--ink);color:var(--paper);padding:clamp(80px,14vw,180px) var(--pad);
  text-align:center;position:relative;
}
.book-kick{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--scarlet);margin-bottom:1.4em}
.book-h{font-family:var(--serif);font-weight:500;font-size:clamp(48px,10vw,150px);line-height:.94;letter-spacing:-.015em;margin-bottom:.7em}
.book-h em{font-style:italic;color:var(--scarlet);-webkit-text-stroke:0}
.book-mail{
  display:inline-block;font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,3vw,38px);border-bottom:1px solid var(--scarlet);padding-bottom:6px;
  transition:color .3s
}
.book-mail:hover{color:var(--scarlet)}
.book-meta{
  margin-top:clamp(40px,7vw,80px);display:flex;flex-wrap:wrap;justify-content:center;gap:.7em 2.4em;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,230,218,.62);
}

/* ============================ COLOPHON ============================ */
.colophon{
  background:var(--ink);color:rgba(236,230,218,.5);
  border-top:1px solid rgba(236,230,218,.16);
  padding:22px var(--pad) calc(var(--frame) + 24px);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}

/* ============================ LIGHTBOX ============================ */
.lb{position:fixed;inset:0;z-index:200;background:rgba(14,11,9,.96);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:88vw;max-height:84svh;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-x{position:absolute;top:calc(var(--frame) + 12px);right:calc(var(--frame) + 16px);background:none;border:0;color:var(--paper);font-size:34px;line-height:1;cursor:pointer;font-family:var(--serif)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--paper);font-size:48px;cursor:pointer;padding:.2em .4em;opacity:.7;transition:opacity .2s}
.lb-nav:hover{opacity:1;color:var(--scarlet)}
.lb-prev{left:calc(var(--frame) + 4px)}.lb-next{right:calc(var(--frame) + 4px)}
.lb-count{position:absolute;bottom:calc(var(--frame) + 16px);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--paper)}
@media (max-width:600px){.lb-nav{font-size:32px}}

/* ============================ REVEALS ============================ */
/* Content is ALWAYS visible by default. The entrance animation is purely
   additive: it only plays when JS adds .in. If JS or the observer never
   runs, every image and line still shows normally. No hidden default state. */
.reveal.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal-img{overflow:hidden}
.reveal-img.in{animation:clipopen 1.35s cubic-bezier(.76,0,.24,1) both}
@keyframes clipopen{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.reveal-img.in img{animation:zoomout 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes zoomout{from{transform:scale(1.12)}to{transform:scale(1)}}
.reveal-line{overflow:hidden;display:block}
.reveal-line .rl-inner{display:block}
.reveal-line.in .rl-inner{animation:lineup 1.05s cubic-bezier(.76,0,.24,1) both}
@keyframes lineup{from{transform:translateY(112%)}to{transform:translateY(0)}}
.mast .l2 .rl-inner{padding-bottom:.08em}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img,.reveal-img img,.reveal-line .rl-inner{opacity:1!important;transform:none!important;clip-path:none!important;transition:none}
  .marquee-row,.cover-scroll i::after{animation:none}
}