/* ==========================================================================
   JOSH & KOSH — 3D flacon
   Pure CSS cuboid bottle. Markup is generated by js/bottle.js
   Size it with  --bh  (total height). Colour it with  --liq  and  --ink.

   Performance notes
   - nothing inside the bottle is ever changed per frame: JS only writes one
     inline `transform` on .bottle__rot (compositor-only)
   - idle motion is a CSS keyframe on .bottle__sway (compositor-only)
   - lighting is baked into the faces (static), no filters, no blend modes
   ========================================================================== */

.bottle {
  --bh: 420px;
  --u: calc(var(--bh) / 293);                         /* 1 design unit */
  --liq: #1a1a1c;                                     /* perfume colour */
  --ink: #ffffff;                                     /* print colour on glass */
  --liq-hi: color-mix(in srgb, var(--liq) 56%, #fff);
  --liq-lo: color-mix(in srgb, var(--liq) 72%, #000);

  position: relative;
  width: calc(var(--u) * 150);
  height: var(--bh);
  perspective: calc(var(--bh) * 3.6);
  perspective-origin: 50% 38%;
  pointer-events: none;
  flex: none;
}

/* JS sets the inline transform of this layer (rotateX / rotateY) */
.bottle__rot {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-9deg) rotateY(-28deg);
  transform-origin: 50% 56%;
  will-change: transform;
}
/* idle sway: runs on the compositor, only while the bottle is on screen */
.bottle__sway {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 56%;
}
.bottle--sway .bottle__sway { animation: bottleSway 8s ease-in-out infinite alternate; }
@keyframes bottleSway {
  from { transform: translate3d(0, 0, 0) rotateY(-8deg); }
  to   { transform: translate3d(0, calc(var(--u) * -8), 0) rotateY(8deg); }
}

/* soft contact shadow on the floor (plain gradient, no blur filter) */
.bottle__shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -30);
  width: calc(var(--u) * 240);
  height: calc(var(--u) * 70);
  margin-left: calc(var(--u) * -120);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .44), rgba(0, 0, 0, .22) 36%, rgba(0, 0, 0, .08) 66%, transparent);
}

/* ---------- boxes & faces ---------- */
.bx {
  --W: calc(var(--u) * var(--w));
  --H: calc(var(--u) * var(--h));
  --D: calc(var(--u) * var(--d));
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * var(--y));
  width: var(--W);
  height: var(--H);
  margin-left: calc(var(--W) / -2);
  transform-style: preserve-3d;
}
.bx .f { position: absolute; display: block; overflow: hidden; }
.bx .fr, .bx .bk { left: 0; top: 0; width: var(--W); height: var(--H); }
.bx .fr { transform: translateZ(calc(var(--D) / 2)); --s: 0; }
.bx .bk { transform: rotateY(180deg) translateZ(calc(var(--D) / 2)); --s: .46; }
.bx .lf, .bx .rt { top: 0; width: var(--D); height: var(--H); left: calc((var(--W) - var(--D)) / 2); }
.bx .rt { transform: rotateY(90deg) translateZ(calc(var(--W) / 2)); --s: .26; }
.bx .lf { transform: rotateY(-90deg) translateZ(calc(var(--W) / 2)); --s: .36; }
.bx .tp {
  left: 0; width: var(--W); height: var(--D);
  top: calc((var(--H) - var(--D)) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--H) / 2));
  --s: 0;
}
/* baked lighting: faces turned away from the light are a little darker */
.bx .f::after {
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: calc(var(--s, 0) * var(--k, .5));
  pointer-events: none;
}

/* ---------- glass body ---------- */
.bx--body { --k: .34; }
.bx--body .f {
  background:
    linear-gradient(90deg, rgba(255,255,255,.62) 0, rgba(255,255,255,.1) 2.4%, rgba(255,255,255,0) 7%, rgba(255,255,255,0) 93%, rgba(255,255,255,.08) 97.6%, rgba(255,255,255,.55) 100%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0, rgba(255,255,255,.04) 9%, rgba(255,255,255,0) 90%, rgba(255,255,255,.22) 100%),
    rgba(214, 224, 236, .075);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 0 0 1px rgba(10,10,12,.06);
}
/* thick glass base */
.bx--body .fr::before, .bx--body .bk::before, .bx--body .lf::before, .bx--body .rt::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * 34);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14) 55%, rgba(255,255,255,.3));
  border-top: 1px solid rgba(255,255,255,.7);
  z-index: 1;
}
/* specular streak on the front face (static) */
.bx--body .fr .hl {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: linear-gradient(90deg, transparent 0 17%, rgba(255,255,255,.5) 18% 20.4%, transparent 21.6% 25%, rgba(255,255,255,.18) 26% 27.4%, transparent 28.4%);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%);
  z-index: 2;
}
.bx--body .tp {
  background:
    radial-gradient(ellipse at 28% 30%, rgba(255,255,255,.62), rgba(255,255,255,.12) 55%, rgba(255,255,255,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

/* ---------- liquid ---------- */
.bx--liq { --k: .6; }
.bx--liq .f {
  background:
    linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(0,0,0,0) 14%, rgba(255,255,255,0) 80%, rgba(255,255,255,.16) 100%),
    linear-gradient(180deg, var(--liq-hi) 0, var(--liq) 24%, var(--liq) 66%, var(--liq-lo) 100%);
}
.bx--liq .fr::before, .bx--liq .bk::before, .bx--liq .lf::before, .bx--liq .rt::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--u) * 3.4);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.bx--liq .tp {
  background: radial-gradient(ellipse at 34% 34%, var(--liq-hi), var(--liq) 70%);
}

/* ---------- neck, collar ---------- */
.bx--neck { --k: .4; }
.bx--neck .f {
  background:
    linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.06) 30%, rgba(255,255,255,.04) 70%, rgba(255,255,255,.45)),
    color-mix(in srgb, var(--liq) 40%, rgba(220,228,236,.5));
}
.bx--collar { --k: .35; }
.bx--collar .f {
  background: linear-gradient(90deg, #7d7d82 0, #e9e9ec 16%, #b2b2b7 42%, #f3f3f6 66%, #9a9aa0 86%, #6d6d72 100%);
}

/* ---------- cap ---------- */
.bx--cap { --k: .55; }
.bx--cap .f {
  background:
    linear-gradient(90deg, #040405 0, #1d1d20 12%, #0c0c0e 34%, #111113 66%, #26262a 88%, #050506 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.bx--cap .fr::before {
  content: "";
  position: absolute; top: 5%; bottom: 8%; left: 15%; width: 7%;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.04) 70%, transparent);
  border-radius: 99px;
}
.bx--cap .tp {
  background:
    radial-gradient(ellipse at 28% 26%, #4a4a50, #141416 58%, #050506);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.bx--cap .fr .capmark {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 26); aspect-ratio: 166.4 / 111;
  transform: translate(-50%, -50%);
  fill: #c9c9ce; opacity: .85;
}

/* ---------- bordo etiket (şişe üstü) ---------- */
.card {
  position: absolute; left: 18%; right: 18%; top: 13%; height: 53%;
  display: grid; justify-items: center; align-content: start; row-gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 14) 0 0; box-sizing: border-box;
  background: linear-gradient(135deg, #6a1f3c, #521630 60%, #461228);
  border: calc(var(--u) * .9) solid rgba(231, 205, 160, .7);
  box-shadow: inset 0 0 0 calc(var(--u) * 2.4) #521630, inset 0 0 0 calc(var(--u) * 3.2) rgba(231, 205, 160, .55), 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(0, 0, 0, .25);
  color: #ead7b4; z-index: 1;
}
.card__mono { display: block; width: calc(var(--u) * 34); aspect-ratio: 166.4 / 111; fill: currentColor; }
.card__word { display: block; width: calc(var(--u) * 46); aspect-ratio: 283.2 / 37.6; fill: currentColor; }
.card__sub { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 9); text-align: center; font: 600 calc(var(--u) * 3.6)/1 "Montserrat", system-ui, sans-serif; letter-spacing: .12em; }
.bottle--sm .card__sub { display: none; }

/* ---------- beyaz kutu ---------- */
.bx--pack { --k: .3; }
.bx--pack .f { background: linear-gradient(180deg, #f6f6f4, #e7e7e4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.bx--pack .tp { background: linear-gradient(135deg, #fbfbfa, #e3e3e0); }
.pack { position: absolute; inset: 0; color: #242b4a; font-family: "Montserrat", system-ui, sans-serif; text-align: center; }
.pack__top { position: absolute; left: 0; right: 0; top: 33%; display: grid; justify-items: center; row-gap: calc(var(--u) * 4); }
.pack__top .card__mono { width: calc(var(--u) * 36); }
.pack__brand { font-weight: 800; font-size: calc(var(--u) * 7.2); letter-spacing: -.01em; }
.pack__brand sup { font-size: .45em; vertical-align: top; }
.pack__sub { font-weight: 500; font-size: calc(var(--u) * 4.4); letter-spacing: .05em; margin-top: calc(var(--u) * 3); color: #3b4160; }
.pack__bot { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 10); display: grid; row-gap: calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.6); font-weight: 500; letter-spacing: .02em; }
.pack__bot b { font-size: .8em; }
/* lite mode (slow devices): flat front elevation — a handful of layers instead of ~25 per bottle */
html.lite .bottle { perspective: none; }
html.lite .bottle__rot, html.lite .bottle__sway, html.lite .bx { transform-style: flat; }
html.lite .bottle__rot { transform: none !important; will-change: auto; }
html.lite .bx .bk, html.lite .bx .lf, html.lite .bx .rt, html.lite .bx .tp { display: none; }
html.lite .bx .fr { transform: none; }

/* browsers without color-mix(): keep the liquid visible with flat tones */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .bottle { --liq-hi: var(--liq); --liq-lo: var(--liq); }
  .bx--neck .f { background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.06) 30%, rgba(255,255,255,.04) 70%, rgba(255,255,255,.45)), var(--liq); }
}