/* ===================================================================
   Solo 1 ml disposables — flavor scene
   Sticky scroll scene: photoreal mural background (Ken Burns + scroll
   + mouse parallax + droplet particles) with the pen descending in the
   middle. Footage mode scrubs alpha webp frames on a canvas; static
   mode drops a cutout image without spin.
   =================================================================== */

.pen-scene { height: 320vh; position: relative; }
.pen-scene__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

.pen-scene__kb {
  position: absolute; inset: -13% -7%;
  animation: scene-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
.pen-scene__mural {
  position: absolute; inset: 0;
  background: center 40% / cover no-repeat;
  will-change: transform;
}
@keyframes scene-kenburns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(-1.4%, -1%, 0); }
}

.pen-scene__light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 55% at 50% 50%, rgba(255,255,252,.18), rgba(255,255,255,0) 70%);
  animation: scene-lightsway 11s ease-in-out infinite alternate;
}
.pen-scene--dark .pen-scene__light {
  background: radial-gradient(ellipse 42% 55% at 50% 50%, rgba(255,255,252,.09), rgba(255,255,255,0) 70%);
}
@keyframes scene-lightsway {
  from { transform: translate3d(-3%, 0, 0); }
  to   { transform: translate3d(3%, -2%, 0); }
}

.pen-scene__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 120% at 50% 50%, rgba(11,15,12,0) 60%, rgba(11,15,12,.5) 100%);
}

.pen-scene__drops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pen-scene__drop {
  position: absolute; bottom: -6vh; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--accent) 40%, #fff) ,
    color-mix(in srgb, var(--accent) 80%, #4a5a30) 62%,
    color-mix(in srgb, var(--accent) 60%, #2a331c));
  opacity: 0;
  filter: blur(.4px);
  animation: scene-rise linear infinite;
}
@keyframes scene-rise {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  8%   { opacity: .8; }
  82%  { opacity: .55; }
  100% { transform: translate3d(var(--sway), -108vh, 0) scale(.55); opacity: 0; }
}

/* pen layers: wrapper takes mouse shift + settle float, inner takes the drop */
.pen-scene__penwrap {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.pen-scene__penwrap.is-settled { animation: scene-float 5s ease-in-out infinite alternate; }
@keyframes scene-float {
  from { margin-top: 0; }
  to   { margin-top: -1.2vh; }
}
.pen-scene__canvas,
.pen-scene__pen {
  display: block;
  filter: drop-shadow(0 30px 40px rgba(15, 22, 12, .5));
}
/* The footage frame is a centered narrow pen on transparent ground, so the
   canvas can safely crop at the sides on portrait screens. */
.pen-scene__canvas {
  height: 100vh;
  width: auto;
  max-width: none; /* style.css caps replaced elements at 100% — the sticky crops us instead */
  aspect-ratio: 3 / 4;
}
.pen-scene__pen {
  height: 72vh;
  width: auto;
  max-width: none;
  will-change: transform;
}

/* scene head: flavor title, fades away as the pen flies in */
.pen-scene__head {
  position: absolute; left: 50%; top: 12vh;
  transform: translateX(-50%);
  text-align: center; z-index: 3; pointer-events: none;
  color: #22301F;
  width: min(90vw, 40rem);
}
.pen-scene--dark .pen-scene__head { color: #EFE9DF; }
.pen-scene__eyebrow {
  font-size: .78rem; letter-spacing: .34em; text-transform: uppercase;
  opacity: .68; margin-bottom: .9rem;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
}
/* Mini-nav chevrons around the counter — the visible cue that flavors
   page left/right (tap targets mirror the swipe/arrow-key navigation). */
.pen-scene__navarrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -12px 0;
  font-size: 1.35rem; line-height: 1; letter-spacing: 0;
  color: currentColor; opacity: .6; text-decoration: none;
  transition: opacity .25s, transform .25s;
}
.pen-scene__navarrow:hover, .pen-scene__navarrow:focus-visible { opacity: 1; }
.pen-scene__navarrow:first-child:hover { transform: translateX(-2px); }
.pen-scene__navarrow:last-child:hover { transform: translateX(2px); }
.pen-scene__eyebrow span { white-space: nowrap; }
@media (max-width: 480px) {
  .pen-scene__eyebrow { font-size: .68rem; letter-spacing: .2em; }
  .pen-scene__navarrow { min-width: 40px; }
}
.pen-scene__title {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 400; letter-spacing: .06em; line-height: 1.08;
}
.pen-scene__fine {
  margin-top: 1rem; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; opacity: .55;
}

.pen-scene__hint {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(25, 38, 20, .55); z-index: 3;
}
.pen-scene--dark .pen-scene__hint { color: rgba(240, 236, 226, .5); }

@media (prefers-reduced-motion: reduce) {
  .pen-scene__kb, .pen-scene__light, .pen-scene__penwrap.is-settled { animation: none; }
  .pen-scene__drops { display: none; }
}