/* YourOwnAtelier: one-page site.
   One background for the whole page (old varnished wood table, ember glow),
   the box stays on screen the whole time, the text scrolls past it.
   No outside fonts or libraries: everything is in this folder. */

@font-face { font-family: "YOA Script"; src: url(fonts/BirthstoneBounce-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "YOA Sans"; src: url(fonts/Montserrat.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --coal: #1d1711;
  --panel: rgba(20, 16, 13, .72);
  --wood: #c59a6a;
  --forest: #21402f;
  --forest-deep: #132a1e;
  --ember: #e98a3c;
  --cream: #efe7d8;
  --muted: #b5ab9a;
  --script: "YOA Script", "Segoe Script", "Brush Script MT", cursive;
  --sans: "YOA Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--coal); }
body { margin: 0; color: var(--cream); font: 400 16.5px/1.6 var(--sans); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: inherit; }

.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--wood); margin-bottom: 1.1em; }
.small { font-size: .86rem; color: var(--muted); }

/* ---------- fixed layers ---------- */
.bg {
  position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100lvh; z-index: -3;
  background: #1c140e url(img/atelier-tall.jpg) center / cover no-repeat; filter: brightness(1.1);   /* upright screens */
}
@media (min-aspect-ratio: 1/1) { .bg { background-image: url(img/atelier-wide.jpg); } }   /* wide screens */
.bg::after {                       /* evening light: dark edges, fire glow from below */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(130% 50% at 50% 108%, rgba(233,138,60,.30), rgba(233,138,60,.06) 55%, transparent 75%),
    radial-gradient(110% 90% at 50% 42%, rgba(12,9,7,.1), rgba(12,9,7,.38));
}
.embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }

.boxlayer {
  --x: 0; --y: 0; --s: 1; --rx: 58; --rz: -14; --open: 0; --splash: 0; --veil: 0; --art: 0;
  position: fixed; inset: 0 0 auto 0; height: 100vh; height: 100svh; z-index: -1;
  display: grid; place-items: center; pointer-events: none;
  /* phones: the box goes soft and dim behind the text (--veil is set while scrolling) */
}
.boxlayer.veiled { filter: blur(calc(var(--veil) * 5px)) brightness(calc(1 - var(--veil) * .38)); }

.scene {
  --w: min(78vw, 520px);
  --h: calc(var(--w) * .19);            /* A5 box: 21 cm wide, 4 cm tall */
  /* outside of the box: dark charcoal card with a fine paper grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 -.14'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --card: #2c2e30;
  --card-in: #d9d3c6;                   /* inside of the box: off-white card */
  position: relative; width: var(--w); height: calc(var(--w) * .705);
  perspective: 1200px; will-change: transform;
  transform: translate3d(calc(var(--x) * 1vw), calc(var(--y) * 1vh), 0) scale(var(--s));
}
.splash {
  position: absolute; left: 50%; top: 58%; width: 128%; height: auto;
  opacity: calc(var(--splash) * .92); filter: brightness(.68) saturate(.9);
  transform: translate(-50%, -50%) scale(calc(.45 + var(--splash) * .55)) rotate(calc(-18deg + var(--splash) * 18deg));
  will-change: transform, opacity;
}
.box-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.box {
  position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: rotateX(calc(var(--rx) * 1deg)) rotateZ(calc(var(--rz) * 1deg));
}
.box > * { position: absolute; }

/* floor: plain card in the shade of the half-open lid. The contents stay a surprise
   (img/box-inside.jpg is no longer shown). */
.floor { inset: 0; background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.4)), var(--card-in); box-shadow: 0 0 60px 26px rgba(0,0,0,.72), 0 0 10px 2px rgba(0,0,0,.8); }

/* sheets and finished pieces standing in the box. Closed lid: they lie flat on the floor.
   As the lid lifts (--art: 0 -> 1, set in script.js) each row tips up around its lower edge,
   back row steepest, so the tops rise above the rim while everything stays inside the box.
   Per row: bottom = where the lower edge stands, --z = lift above the row behind, --sh = shade.
   Per piece: left, width, --ar shape, --r turn, --k place in the stack, --img picture. */
.art {
  width: 25%; aspect-ratio: var(--ar); border-radius: 2px; transform-origin: 50% 100%;
  background: linear-gradient(rgba(0,0,0,var(--sh)), rgba(0,0,0,var(--sh))), var(--img, none) center / cover no-repeat, var(--paper, #ece6da);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 -6px 14px rgba(0,0,0,.45);
  opacity: calc(var(--art) * 6); will-change: transform; backface-visibility: hidden;
  transform: translateZ(var(--z)) rotateX(calc(var(--art) * -42deg)) rotateZ(var(--r)) translateZ(var(--k));
}
/* All rows tip by the same angle, so the sheets stay parallel and can never cut through each
   other (different angles per row made them cross while moving: flicker on phones). --z lifts
   each row a little above the one behind it, --k separates the sheets within a row. */
.row-b { bottom: 40%; --z: 1px;  --sh: .22; }
.row-m { bottom: 22%; --z: 13px; --sh: .1; }
.row-f { bottom: 4%;  --z: 25px; --sh: 0; }
.b1 { left: 3%;  width: 27%; --ar: .68;  --r: -6deg; --k: 0px; --paper: #b9976b; }
.b2 { left: 21%; width: 43%; --ar: 1.45; --r: 3deg;  --k: 3px; --img: url(img/page-motifs.jpg); }
.b4 { left: 71%; width: 26%; --ar: .66;  --r: -3deg; --k: 0px; --paper: #7c1f1c; }
.b3 { left: 52%; width: 36%; --ar: 1.2;  --r: 6deg;  --k: 6px; --img: url(img/page-lila.jpg); }
.m1 { left: 4%;  width: 22%; --ar: .62;  --r: -7deg; --k: 0px; --img: url(img/art-lila.jpg); }
.m2 { left: 23%; width: 33%; --ar: 1.4;  --r: 4deg;  --k: 3px; --img: url(img/page-yellow.jpg); }
.m4 { left: 53%; width: 17%; --ar: .56;  --r: -4deg; --k: 6px; --img: url(img/art-sun.jpg); }
.m3 { left: 71%; width: 25%; --ar: .86;  --r: 8deg;  --k: 9px; --img: url(img/art-rot.jpg); }
.f1 { left: 7%;  width: 21%; --ar: .63;  --r: -5deg; --k: 0px; --img: url(img/art-orange.jpg); }
.f5 { left: 26%; width: 19%; --ar: .66;  --r: 5deg;  --k: 3px; --img: url(img/art-loops.jpg); }
.f2 { left: 43%; width: 19%; --ar: 1;    --r: -3deg; --k: 6px; --img: url(img/art-rose.jpg); }
.f3 { left: 60%; width: 22%; --ar: .68;  --r: 3deg;  --k: 9px; --img: url(img/art-yellow.jpg); }
.f4 { left: 82%; width: 14%; --ar: .49;  --r: 9deg;  --k: 12px; --img: url(img/art-skull.jpg); }

/* walls: off-white inside, charcoal outside (::before only shows from the outside) */
.wall { transform-style: preserve-3d; background: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.34)), var(--card-in); }
.wall::before { content: ""; position: absolute; inset: 0; transform: translateZ(.6px); backface-visibility: hidden; background: var(--grain), linear-gradient(#34373a, #202224); }
.wall--front { left: 0; bottom: 0; width: 100%; height: var(--h); transform-origin: bottom; transform: rotateX(-90deg); }
.wall--back  { left: 0; top: 0; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(90deg); }
.wall--left  { left: 0; top: 0; height: 100%; width: var(--h); transform-origin: left; transform: rotateY(-90deg); }
.wall--right { right: 0; top: 0; height: 100%; width: var(--h); transform-origin: right; transform: rotateY(90deg); }
.wall--left::before, .wall--right::before { background: var(--grain), linear-gradient(90deg, #1d1f21, #2b2d30); }

.lid {
  inset: -2px; transform-style: preserve-3d; transform-origin: top; will-change: transform;
  transform: translateZ(calc(var(--h) + 1px)) rotateX(calc(var(--open) * 98deg));
}
/* inside of the lid: photo of the hand-splattered card */
.lid::before { content: ""; position: absolute; inset: 0; transform: translateZ(-1px); background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.05)), var(--card-in) url(img/box-lid.jpg) center / cover; }
.lid__top {
  position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden;
  background: var(--grain), radial-gradient(120% 90% at 30% 20%, #3a3d40, var(--card) 55%, #1e2022);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 30px rgba(0,0,0,.35);
}
.lid__top .wordmark { font-size: calc(var(--w) * .04); color: rgba(239,231,216,.78); }
.lid__top .wordmark i { color: #7fa88c; }
.lid__lip { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--h) * .46); transform-origin: bottom; transform: rotateX(90deg); background: var(--grain), linear-gradient(#37393c, #232527); }

/* ---------- wordmark: "YOUR OWN" bold print letters + handwritten "Atelier" ---------- */
.wordmark { display: inline-flex; align-items: baseline; gap: .35em; text-decoration: none; white-space: nowrap; font-size: 1rem; line-height: 1; }
.wordmark b { font: 800 .78em var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.wordmark i { font: 400 2.1em/1 var(--script); font-style: normal; color: var(--wood); }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 20px 18px;
  background: linear-gradient(rgba(20,16,12,.9) 45%, rgba(20,16,12,0));
}
.lang {
  font: 700 .74rem var(--sans); letter-spacing: .12em; color: var(--cream);
  background: rgba(14,11,9,.4); border: 1px solid rgba(239,231,216,.35); border-radius: 999px;
  min-width: 44px; min-height: 36px; cursor: pointer;
}
.lang:hover, .lang:focus-visible { border-color: var(--ember); color: var(--ember); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; letter-spacing: .03em;
  color: #1b130c; background: linear-gradient(180deg, #f0a257, var(--ember));
  padding: 14px 28px; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,200,140,.25) inset, 0 10px 34px -10px rgba(233,138,60,.7);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,200,140,.4) inset, 0 16px 40px -10px rgba(233,138,60,.9); }
.btn--big { font-size: 1.08rem; padding: 18px 38px; }

/* ---------- the scrolling text ---------- */
main { width: min(1240px, 100% - 40px); margin-inline: auto; }
.stop { display: flex; margin-bottom: 75vh; }           /* the gap is where the box changes pose */
.stop:last-child { margin-bottom: 0; }
.beat { height: 45vh; }
.panel { width: min(100%, 440px); text-shadow: 0 1px 14px rgba(0,0,0,.75); }
.panel--left { margin-right: auto; }
.panel--right { margin-left: auto; }
.panel--center { margin-inline: auto; width: min(100%, 680px); text-align: center; }

.hero { min-height: 100vh; min-height: 100svh; align-items: center; padding: 90px 0 40px; }
.lead { font-size: 1.1rem; color: #ddd4c3; margin-bottom: 1.8em; }

.cards { display: grid; gap: 12px; margin-top: 1.6em; }
.card {
  background: var(--panel); border: 1px solid rgba(239,231,216,.09); border-left: 3px solid var(--forest);
  border-radius: 6px; padding: 18px 20px; text-shadow: none;
}
.card h3 { margin-bottom: .3em; }
.card p, .steps p { color: #cfc6b5; margin: 0; font-size: .95rem; }

.artist__photo {
  width: 150px; aspect-ratio: 4 / 5; border-radius: 4px; display: grid; place-items: center; margin-bottom: 26px;
  background: var(--panel); border: 1px dashed rgba(239,231,216,.3);
  color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; text-shadow: none;
}

.steps { list-style: none; counter-reset: s; padding: 0; margin: 1.8em 0 0; display: grid; gap: 26px; }
.steps li { counter-increment: s; position: relative; padding-left: 62px; min-height: 44px; }
.steps li::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  font: 500 1.3rem var(--serif); color: var(--ember); background: var(--panel);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(233,138,60,.5);
}

.order { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding: 46vh 0 9vh; }
.price { font-family: var(--serif); font-size: 1.25rem; color: var(--wood); margin-bottom: 1.5em; }
.order .small { margin-top: 1.8em; }

/* ---------- footer + legal pages ---------- */
.foot { padding: 0 20px 26px; font-size: .86rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; }
.foot a { color: var(--muted); text-decoration: none; padding: 8px 0; }
.foot a:hover, .foot a:focus-visible { color: var(--ember); }
.legal { width: min(720px, 100% - 40px); margin-inline: auto; padding: 130px 0 80px; }
.legal a { color: var(--ember); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---------- phone: text travels over the (blurred) box ---------- */
@media (max-width: 799px) {
  .stop { margin-bottom: 42vh; }        /* shorter empty stretches between the text blocks */
  .beat { height: 16vh; }
  .panel { width: 100%; }
  .hero { align-items: flex-start; padding-top: 104px; text-align: center; }
  .hero .panel { margin-inline: auto; }
  .lead { font-size: 1.02rem; }
  .artist__photo { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boxlayer { transition: none; }
}