/* =========================================================
   WOBEE — tattoo studio
   Recreation of the "Vertical" editorial scroll layout
   Mobile-first. All scroll FX in main.js (GSAP + Lenis).
   ========================================================= */

:root{
  --bg:        #0b0b0c;
  --bg-2:      #121214;
  --fg:        #f3f0ea;
  --muted:     #8c8881;
  --faint:     #56534e;
  --line:      rgba(243,240,234,.14);
  --line-2:    rgba(243,240,234,.07);
  --accent:    #1ed760;

  --ff-disp: "Bricolage Grotesque", "Times New Roman", serif;
  --ff-text: "Inter", system-ui, sans-serif;

  --pad: clamp(20px, 5.5vw, 80px);
  --maxw: 1680px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ff-text);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3{ font-family:var(--ff-disp); font-weight:600; line-height:.96; letter-spacing:-.02em; }
::selection{ background:var(--accent); color:#fff; }

/* lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ===== shared bits ===== */
.section-label,.intro__label,.gallery__hint,.feature__eyebrow,.closing__small,.zoom__small{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.section-label span,.intro__label span{ color:var(--faint); margin-right:.5em; }

.section-title{
  font-size:clamp(2.4rem, 9vw, 6rem);
  letter-spacing:-.03em;
}

/* ===== reveal fallback (only hide when JS active & motion ok) ===== */
.js:not(.reduced) .reveal-up{ opacity:0; transform:translateY(24px); }
.js:not(.reduced) [data-splitlines]{ opacity:0; }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.loader__inner{
  width:min(86vw,var(--maxw));
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 var(--pad);
}
.loader__mark{
  font-family:var(--ff-disp); font-weight:700;
  font-size:clamp(2.4rem,12vw,7rem); letter-spacing:-.03em; line-height:1;
}
.loader__count{ font-size:.8rem; letter-spacing:.1em; color:var(--muted); }
.loader__count i{ font-style:normal; }
.loader.is-done{ pointer-events:none; }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad);
  color:var(--fg);
  transform:translateY(-110%);
  transition:transform .55s var(--ease), background .4s ease, backdrop-filter .4s ease;
}
.topbar.is-visible{
  transform:translateY(0);
  background:rgba(11,11,12,.72);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.topbar__logo{ font-family:var(--ff-disp); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.topbar__nav{ display:none; gap:28px; }
.topbar__nav a{ font-size:.82rem; letter-spacing:.04em; position:relative; opacity:.85; }
.topbar__nav a:hover{ opacity:1; }
.topbar__cta{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; letter-spacing:.03em;
  border:1px solid var(--line);
  padding:8px 14px; border-radius:100px;
  transition:background .3s,color .3s;
}
.topbar__cta:hover{ background:var(--fg); color:#0b0b0c; }

@media(min-width:860px){
  .topbar__nav{ display:flex; }
}

/* =========================================================
   01 · HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:calc(var(--pad) + 8px) var(--pad) calc(var(--pad) + 6px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:-8% 0 -8% 0; z-index:-1; will-change:transform; }
.hero__media img{ filter:grayscale(.25) contrast(1.02) brightness(.78); }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.15) 30%, rgba(11,11,12,.55) 72%, rgba(11,11,12,.96) 100%),
    radial-gradient(120% 80% at 70% 35%, transparent 40%, rgba(11,11,12,.6) 100%);
}

/* MOBILE: kicker (eyebrow + promise) up top, giant headline anchored at the bottom */
.hero__grid{
  margin-top:0; width:100%;
  flex:1 1 auto;
  display:flex; flex-direction:column;
}
.hero__eyebrow{
  order:1;
  display:flex; align-items:center; gap:12px;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg);
}
.hero__eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); display:inline-block; }

.hero__statement{
  order:3;                    /* mobile: sits BELOW the headline */
  font-family:var(--ff-disp);
  font-weight:300;
  font-size:clamp(1.05rem, 4.3vw, 1.5rem);
  line-height:1.16;
  letter-spacing:-.01em;
  max-width:30ch;
  margin-top:18px;
  color:var(--fg);
}

.hero__title{
  order:2;
  margin-top:auto;            /* push the headline (and the slogan under it) to the bottom */
  width:100%;
  font-size:clamp(4rem, 27vw, 10rem);
  line-height:.8;
  letter-spacing:-.055em;
  font-weight:700;
}
.hero__title .hword{
  display:block; white-space:nowrap; text-align:left;
  transform-origin:left center; will-change:transform,opacity;
}
.hero__title .hword--accent{ color:var(--accent); }
.hero__title .hword__in{ display:inline-block; will-change:transform; }

.hero__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-top:22px;
}

/* DESKTOP: full-bleed overlay composition (giant cascade fills the screen,
   eyebrow top-left, statement top-right, foot bottom — like the original) */
@media(min-width:860px){
  .hero__grid{ display:contents; }
  /* desktop crop: bias the portrait toward the top so the face shows (mobile keeps default centre) */
  .hero__media img{ object-position:center 18%; }
  .hero__title{
    position:absolute; inset:var(--pad); width:auto;
    display:flex; flex-direction:column; justify-content:center;
    font-size:min(31vh, 26vw, 20rem);
    line-height:.82; z-index:1;
  }
  /* desktop keeps the diagonal cascade */
  .hero__title .hword:nth-child(1){ text-align:left;   transform-origin:left center;  }
  .hero__title .hword:nth-child(2){ text-align:center; transform-origin:center;       }
  .hero__title .hword:nth-child(3){ text-align:right;  transform-origin:right center; }
  .hero__eyebrow{ position:absolute; top:var(--pad); left:var(--pad); margin:0; z-index:3; }
  .hero__statement{
    position:absolute; top:var(--pad); right:var(--pad); margin:0;
    text-align:right; max-width:24ch; z-index:3;
  }
  .hero__foot{
    position:absolute; left:var(--pad); right:var(--pad); bottom:var(--pad);
    margin:0; z-index:3;
  }
}
.hero__handle{ font-size:.78rem; letter-spacing:.05em; color:var(--muted); }
.hero__handle:hover{ color:var(--fg); }
.hero__scroll{ display:flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hero__scroll i{ width:1px; height:34px; background:linear-gradient(var(--muted),transparent); display:block; }

/* splitlines machinery */
[data-splitlines] .line{ display:block; overflow:hidden; }
[data-splitlines] .line > span{ display:block; will-change:transform; }

/* =========================================================
   02 · MARQUEE
   ========================================================= */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex; align-items:center; gap:.6em;
  will-change:transform;
  font-family:var(--ff-disp);
  font-size:clamp(1.6rem,5vw,3rem);
  font-weight:400; letter-spacing:-.02em;
}
.marquee__track .sep{ color:var(--accent); font-size:.5em; transform:translateY(-.1em); }

/* =========================================================
   03 · INTRO
   ========================================================= */
.intro{ padding:clamp(70px,12vw,170px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.intro__label{ margin-bottom:clamp(28px,5vw,60px); }
.intro__lead{
  font-family:var(--ff-disp); font-weight:400;
  font-size:clamp(1.7rem,5.2vw,4rem);
  line-height:1.04; letter-spacing:-.025em;
  max-width:20ch;
}
.intro__note{
  margin-top:clamp(30px,5vw,56px);
  max-width:46ch; color:var(--muted);
  font-size:clamp(.95rem,2vw,1.1rem); line-height:1.6;
}
@media(min-width:860px){
  .intro__note{ margin-left:auto; text-align:left; }
}

/* =========================================================
   04 · SELECTED WORK
   ========================================================= */
.work{ padding:clamp(20px,4vw,40px) var(--pad) clamp(60px,9vw,120px); max-width:var(--maxw); margin:0 auto; }
.work__head{ margin-bottom:clamp(40px,7vw,90px); }
.work__head .section-label{ display:block; margin-bottom:18px; }

.piece{
  display:grid; gap:22px;
  grid-template-columns:1fr;
  margin-bottom:clamp(70px,11vw,150px);
}
.piece__media{
  position:relative; overflow:hidden;
  aspect-ratio:4/5;
  border-radius:3px;
  background:var(--bg-2);
}
.piece__media img{
  transform:scale(1.18);            /* room for parallax */
  will-change:transform;
}
.piece__meta{ display:flex; flex-direction:column; gap:10px; }
.piece__index{ font-size:.74rem; letter-spacing:.18em; color:var(--accent); }
.piece__caption{ font-size:clamp(1.8rem,7vw,3.4rem); letter-spacing:-.03em; }
.piece__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.piece__tags span{
  font-size:.72rem; letter-spacing:.05em; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:5px 12px;
}
.piece__place{ font-size:.8rem; letter-spacing:.05em; color:var(--faint); margin-top:2px; }

@media(min-width:860px){
  .piece{
    grid-template-columns:1fr 1fr;
    align-items:center; gap:clamp(40px,6vw,100px);
  }
  .piece__media{ aspect-ratio:4/5; }
  .piece--right .piece__media{ order:2; }
  .piece--right .piece__meta{ order:1; text-align:right; align-items:flex-end; }
  .piece__meta{ padding:20px 0; }
}

/* =========================================================
   05 · PINNED ZOOM
   ========================================================= */
.zoom{ position:relative; height:100svh; overflow:hidden; }
.zoom__frame{
  position:absolute; inset:0;
  width:64vw; height:64vh;          /* same aspect as viewport → uniform scale, no distortion */
  margin:auto;
  overflow:hidden; border-radius:6px;
  transform-origin:center center;
  will-change:transform;
}
.zoom__frame img{ filter:brightness(.7) grayscale(.3); transform:scale(1.12); will-change:transform; }
.zoom__veil{ position:absolute; inset:0; background:linear-gradient(rgba(11,11,12,.1),rgba(11,11,12,.7)); }
.zoom__copy{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:18px; padding:0 var(--pad);
  pointer-events:none;
}
.zoom__small{ color:#fff; }
.zoom__line{
  color:#fff;
  font-size:clamp(1.9rem,7vw,4.6rem);
  line-height:1.04; letter-spacing:-.025em; font-weight:700;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}

/* =========================================================
   06 · PILLARS
   ========================================================= */
.pillars{ padding:clamp(70px,12vw,170px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.pillars__head{ margin-bottom:clamp(30px,5vw,60px); }
.pillar{
  display:grid; gap:10px;
  grid-template-columns:1fr;
  padding:clamp(28px,5vw,48px) 0;
  border-top:1px solid var(--line);
}
.pillar:last-child{ border-bottom:1px solid var(--line); }
.pillar__num{ font-size:.78rem; letter-spacing:.15em; color:var(--accent); }
.pillar__title{ font-size:clamp(2rem,8vw,4.2rem); letter-spacing:-.03em; }
.pillar__text{ color:var(--muted); font-size:clamp(.98rem,2.2vw,1.18rem); line-height:1.55; max-width:52ch; }

@media(min-width:860px){
  .pillar{
    grid-template-columns:.18fr .42fr .4fr;
    align-items:baseline; gap:clamp(20px,4vw,60px);
  }
  .pillar__text{ padding-top:6px; }
}

/* =========================================================
   07 · HORIZONTAL GALLERY
   ========================================================= */
.gallery{ padding:clamp(50px,9vw,120px) 0; overflow:hidden; }
.gallery__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 var(--pad); margin-bottom:clamp(28px,4vw,52px);
}
.gallery__viewport{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.gallery__viewport::-webkit-scrollbar{ display:none; }
.gallery__track{
  display:flex; gap:clamp(14px,2vw,28px);
  padding:0 var(--pad);
  width:max-content;
}
.slide{
  flex:0 0 auto;
  width:min(74vw,360px);
  scroll-snap-align:center;
}
.slide img{
  aspect-ratio:3/4; border-radius:3px; background:var(--bg-2);
}
.slide figcaption{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; font-size:.74rem; letter-spacing:.05em; color:var(--muted);
}
.slide figcaption em{ font-style:normal; color:var(--faint); }

@media(min-width:860px){
  .slide{ width:min(38vw,460px); }
}

/* =========================================================
   08 · ARCHIVE
   ========================================================= */
.archive{ position:relative; padding:clamp(70px,12vw,180px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.archive__head{ margin-bottom:clamp(40px,7vw,80px); }
.archive__head .section-label{ display:block; margin-bottom:18px; }
.archive__title{ font-size:clamp(2.8rem,13vw,9rem); letter-spacing:-.04em; }

.arc-list{ border-top:1px solid var(--line); }
.arc{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"mod name" "mod desc";
  gap:2px 18px;
  padding:clamp(22px,4vw,34px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left .45s var(--ease);
  cursor:pointer;
}
.arc__mod{ grid-area:mod; font-size:.74rem; letter-spacing:.12em; color:var(--accent); align-self:center; }
.arc__name{ grid-area:name; font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.3rem,5vw,2.4rem); letter-spacing:-.02em; line-height:1.05; }
.arc__desc{ grid-area:desc; color:var(--muted); font-size:.9rem; }

@media(min-width:860px){
  .arc{
    grid-template-columns:120px 1fr auto;
    grid-template-areas:"mod name desc";
    align-items:center; gap:40px;
  }
  .arc__desc{ text-align:right; opacity:.55; transition:opacity .4s; }
  .arc:hover{ padding-left:24px; }
  .arc:hover .arc__desc{ opacity:1; }
  .arc:hover .arc__name{ color:#fff; }
}

.arc-preview{
  position:fixed; top:0; left:0;
  width:240px; height:300px;
  border-radius:4px; overflow:hidden;
  pointer-events:none; z-index:60;
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .3s, transform .4s var(--ease);
}
.arc-preview.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media(max-width:859px){ .arc-preview{ display:none; } }

/* =========================================================
   09 · BOOKING FEATURE
   ========================================================= */
.feature{ position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.feature__media{ position:absolute; inset:-8% 0; z-index:-1; will-change:transform; }
.feature__media img{ filter:brightness(.62) grayscale(.2); transform:scale(1.12); }
.feature__scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,12,.55),rgba(11,11,12,.2) 40%,rgba(11,11,12,.92)); }
.feature__copy{ padding:var(--pad); max-width:760px; }
.feature__eyebrow{ color:#fff; margin-bottom:16px; }
.feature__title{ color:#fff; font-size:clamp(2.4rem,9vw,6rem); letter-spacing:-.03em; margin-bottom:22px; }
.feature__detail{ color:rgba(243,240,234,.82); font-size:clamp(1rem,2.4vw,1.25rem); line-height:1.55; max-width:48ch; margin-bottom:30px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.92rem; letter-spacing:.02em;
  background:var(--fg); color:#0b0b0c;
  padding:14px 22px; border-radius:100px;
  transition:transform .3s var(--ease), background .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); background:#fff; }
.btn svg{ transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--lg{ font-size:clamp(1rem,2.6vw,1.2rem); padding:18px 30px; }

/* =========================================================
   10 · PROCESS
   ========================================================= */
.process{ padding:clamp(70px,12vw,170px) var(--pad); max-width:var(--maxw); margin:0 auto; }
.process__head{ margin-bottom:clamp(40px,7vw,80px); }
.process__head .section-label{ display:block; margin-bottom:18px; }
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.step{ background:var(--bg); padding:clamp(28px,5vw,48px); display:flex; flex-direction:column; gap:12px; }
.step__num{ font-size:.78rem; letter-spacing:.15em; color:var(--accent); }
.step__title{ font-size:clamp(1.5rem,5vw,2.2rem); letter-spacing:-.02em; }
.step__text{ color:var(--muted); font-size:clamp(.95rem,2vw,1.05rem); line-height:1.55; }
@media(min-width:760px){ .steps{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   11 · CLOSING
   ========================================================= */
.closing{
  padding:clamp(90px,16vw,220px) var(--pad);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:clamp(22px,4vw,40px);
}
.closing__small{ color:var(--accent); }
.closing__title{ font-size:clamp(2.6rem,11vw,7.5rem); letter-spacing:-.035em; max-width:14ch; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--line); padding:clamp(40px,7vw,70px) var(--pad) 30px; max-width:var(--maxw); margin:0 auto; }
.footer__top{ display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:clamp(40px,8vw,80px); }
.footer__mark{ font-family:var(--ff-disp); font-weight:700; font-size:clamp(2.6rem,15vw,9rem); letter-spacing:-.04em; line-height:.8; }
.footer__handle{ font-size:.85rem; letter-spacing:.04em; color:var(--muted); }
.footer__handle:hover{ color:var(--fg); }
.footer__grid{
  display:grid; gap:24px; grid-template-columns:1fr 1fr;
  padding:clamp(30px,5vw,50px) 0;
  border-top:1px solid var(--line-2);
  font-size:.85rem; line-height:1.5; color:var(--muted);
}
.footer__cta a{ color:var(--fg); }
.footer__cta a:hover{ color:var(--accent); }
.footer__base{ display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line-2); font-size:.72rem; letter-spacing:.06em; color:var(--faint); text-transform:uppercase; }
@media(min-width:760px){ .footer__grid{ grid-template-columns:repeat(4,1fr); } }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .hero__media,.feature__media{ inset:0; }
  .piece__media img,.zoom__frame img,.feature__media img{ transform:none; }
  .hero__title .char,[data-splitlines] .line>span{ transform:none !important; opacity:1 !important; }
}