/* ==========================================================
   THE WHITE ROSE RAVEN — V1.5 VERA VANE FILM BAND
   Clean rewrite. Replaces all V1.4–V1.4.11 Vera layers.
   Rule: the scene image stays crisp. Effects add light and
   motion, never haze over the laptop.
   Layers (back → front):
     .vf-camera  scene + screen slot + candle light (moves as one)
     .vf-atmos   canvas: ground mist, dust in screen light, petals
     .vf-grade   readability gradient on the text side + vignette
     .vf-grain   film grain
     .vf-bar     letterbox bars (entrance)
     .vf-copy    text
   ========================================================== */

.project-vera{
  --vf-scale:1;
  --vf-px:0px;
  --vf-py:0px;
  --vf-flame:.55;
  --vf-screen:1;
  --vf-tx:-50%;
  position:relative;
  display:flex!important;
  align-items:center;
  min-height:clamp(560px,46vw,680px);
  padding:72px 56px!important;
  margin:0;
  border:0;
  border-bottom:1px solid rgba(235,218,194,.10);
  border-radius:0;
  background:#07060a!important;
  overflow:hidden;
  isolation:isolate;
}
.project-vera::before,.project-vera::after{content:none!important}

/* ---------- Stage / camera ---------- */
.vf-stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.vf-camera{
  position:absolute;
  left:50%;
  top:50%;
  width:max(100%,1120px);
  width:max(100%,1120px,var(--vf-minw,0px)); /* JS keeps it taller than the band, even with drift */
  aspect-ratio:1774/887;
  transform-origin:34% 50%; /* push-in grows to the right, candles on the left stay in frame */
  transform:translate(var(--vf-tx),-50%) translate3d(var(--vf-px),var(--vf-py),0) scale(var(--vf-scale));
  will-change:transform;
}
.vf-scene{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:contrast(1.06) saturate(1.04) brightness(1.02);
}

/* Screen slot — exact inner display of the baked laptop (1774×887 source).
   Display content: x 862–1446, y 294–626, slight perspective shear. */
.vf-screen{
  position:absolute;
  left:48.59%;
  top:33.15%;
  width:32.92%;
  height:37.43%;
  overflow:hidden;
  transform-origin:0 0;
  transform:skewX(-1.6deg);
  filter:brightness(var(--vf-screen));
}
.vf-screen{background:#07060b}
/* Real page of veravane.sk on the display. Slightly taller than the display, so it
   drifts slowly down and back like someone reading the page. */
.vf-screen-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0%;
  filter:brightness(.9) contrast(1.04) saturate(1.02);
}
.project-vera.vf-live .vf-screen-img{animation:vfScreenRead 18s ease-in-out 2.6s infinite alternate}
@keyframes vfScreenRead{0%,12%{object-position:50% 0%}88%,100%{object-position:50% 100%}}
.vf-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 18px rgba(0,0,0,.55);
  background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 18%,transparent 85%,rgba(0,0,0,.25));
}
.vf-screen-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  opacity:0;transition:opacity 1.2s ease;
}
.vf-screen-video.is-ready{opacity:1}
/* Glass reflection: a soft diagonal streak that sweeps across the display. */
.vf-screen-sheen{
  position:absolute;inset:-20% -60%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,240,255,.0) 44%,rgba(255,240,255,.12) 49%,rgba(255,240,255,.035) 52%,transparent 58%);
  transform:translateX(-60%);
  mix-blend-mode:screen;
  opacity:0;
}
.project-vera.vf-sweep .vf-screen-sheen{animation:vfSheen 1.6s cubic-bezier(.3,.6,.2,1) both}
@keyframes vfSheen{0%{transform:translateX(-60%);opacity:0}15%{opacity:1}100%{transform:translateX(60%);opacity:0}}

/* Cut-out pen aligned to the photographed pen (source 1774×887):
   gem (527,662) → end cap (842,600); scale .632, rotation −2.52°. Moves only a few px. */
.vf-pen{
  position:absolute;left:25.79%;top:67.66%;width:22.23%;height:auto;
  transform-origin:17.6% 65.7%;
  transform:translate3d(var(--vf-pen-x,0px),var(--vf-pen-y,0px),0) rotate(-2.52deg);
  filter:brightness(.92) contrast(1.04) drop-shadow(0 6px 6px rgba(0,0,0,.55));
}

/* Candle light — warm pool on the candle cluster, intensity from JS noise. */
.vf-candle{
  position:absolute;left:-4%;top:12%;width:22%;height:62%;
  background:
    radial-gradient(38% 30% at 34% 30%,rgba(255,176,92,.55),rgba(255,140,60,.16) 45%,transparent 72%),
    radial-gradient(30% 24% at 8% 78%,rgba(255,160,80,.32),transparent 70%);
  mix-blend-mode:screen;
  opacity:var(--vf-flame);
}

/* ---------- Atmosphere canvas ---------- */
.vf-atmos{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
/* WebGL smoke: ground fog + candle smoke. Rendered at half resolution, screen-blended,
   sits above the grade so candle smoke on the left is not swallowed by the text gradient. */
.vf-smoke{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:0;transition:opacity 2.4s ease}
.project-vera.vf-smoke-on .vf-smoke{opacity:1}

/* ---------- Foreground cutouts: depth layer in front of the scene ----------
   They sit closest to the lens: slightly defocused, darker, and moving ~3x the camera. */
.vf-fg{
  position:absolute;inset:0;
  transform:translate3d(var(--vf-fx,0px),var(--vf-fy,0px),0) scale(var(--vf-fs,1));
  transform-origin:100% 0;
  will-change:transform;
}
.vf-fg img{position:absolute;display:block;max-width:none}
/* Flowering branch hanging into the top-right corner: we "shoot through" it.
   It sits where the scene only has dark wall, so nothing is doubled. */
.vf-fg-branch{
  right:-6%;top:-11%;width:38%;height:auto;
  filter:brightness(.9) saturate(1.12) contrast(1.05) drop-shadow(0 20px 30px rgba(0,0,0,.5));
  transform-origin:100% 0;
}
.project-vera.vf-live .vf-fg-branch{animation:vfBranchSway 9s ease-in-out infinite alternate}
@keyframes vfBranchSway{from{rotate:-1.2deg}to{rotate:1.4deg}}
.vf-petals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- Grade: readability only on the left, laptop untouched ---------- */
.vf-grade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,4,8,.34) 0%,rgba(5,4,8,.60) 9%,rgba(5,4,8,.68) 24%,rgba(5,4,8,.28) 42%,rgba(5,4,8,0) 56%),
    linear-gradient(180deg,rgba(5,4,8,.45) 0%,transparent 16%,transparent 80%,rgba(5,4,8,.55) 100%),
    radial-gradient(120% 120% at 62% 50%,transparent 60%,rgba(0,0,0,.45) 100%);
}

/* ---------- Film grain ---------- */
.vf-grain{
  position:absolute;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:.07;
  mix-blend-mode:overlay;
}
.project-vera.vf-live .vf-grain{animation:vfGrain .9s steps(6) infinite}
@keyframes vfGrain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* ---------- Letterbox bars ---------- */
.vf-bar{position:absolute;left:0;right:0;height:0;background:#030205;z-index:2}
.vf-bar-top{top:0}
.vf-bar-bottom{bottom:0}

/* ---------- Copy (mockup typography) ---------- */
.vf-copy{position:relative;z-index:3;max-width:500px!important;padding:0!important}
.vf-index{
  display:flex;align-items:center;gap:12px;margin:0 0 22px!important;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,240,233,.45);
}
.vf-index span{font-family:var(--display);font-size:14px;letter-spacing:.06em;color:var(--gold-2)}
.vf-index::after{content:"";width:42px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.vf-title{
  margin:0 0 14px!important;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(46px,4.7vw,72px)!important;
  white-space:nowrap;
  line-height:.98!important;
  letter-spacing:.035em!important;
  text-transform:uppercase;
  color:#f6efe6;
  text-shadow:0 10px 40px rgba(0,0,0,.55);
}
.vf-line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.vf-line>span{display:inline-block}
.vf-sub{
  margin:0 0 22px!important;
  font-size:11px!important;font-weight:600;letter-spacing:.3em!important;text-transform:uppercase;
  color:var(--gold)!important;
}
.vf-text{font-size:14.5px!important;line-height:1.75!important;color:rgba(245,240,233,.72)!important;max-width:400px;margin:0 0 24px!important}
.vf-text em{font-style:italic;color:var(--gold-2)}
.vf-facts{
  list-style:none;margin:0 0 30px;padding:14px 0 0;display:flex;gap:22px;flex-wrap:wrap;
  border-top:1px solid rgba(235,218,194,.12);
  font-size:10.5px;letter-spacing:.04em;color:rgba(245,240,233,.5);
}
.vf-facts li{display:grid;gap:3px}
.vf-facts b{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.02em;color:#efe4d4}
.vf-cta{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);padding-bottom:6px;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .25s ease;
}
.vf-cta span{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.vf-cta:hover{color:#f3ddba;background-size:0% 1px;background-position:100% 100%}
.vf-cta:hover span{transform:translateX(6px)}
.vf-cta:focus-visible{outline:1px solid var(--gold);outline-offset:6px}

/* ---------- Entrance choreography (JS adds .vf-armed, then .vf-in) ---------- */
.project-vera.vf-armed .vf-bar{height:50.5%}
.project-vera.vf-armed .vf-scene{filter:contrast(1.06) saturate(.6) brightness(.35)}
.project-vera.vf-armed .vf-screen{--vf-screen:.15}
.project-vera.vf-armed .vf-line>span{transform:translateY(108%)}
.project-vera.vf-armed .vf-fg img{opacity:0;translate:0 -50px}
.project-vera.vf-in .vf-fg img{opacity:1;translate:0 0;transition:opacity 1.2s ease .5s,translate 1.8s cubic-bezier(.2,.75,.15,1) .5s}
.project-vera.vf-armed .vf-index,
.project-vera.vf-armed .vf-sub,
.project-vera.vf-armed .vf-text,
.project-vera.vf-armed .vf-facts,
.project-vera.vf-armed .vf-cta{opacity:0;transform:translateY(14px)}

.project-vera.vf-in .vf-bar{height:0;transition:height 1.25s cubic-bezier(.7,0,.2,1)}
.project-vera.vf-in .vf-scene{filter:contrast(1.06) saturate(1.04) brightness(1.02);transition:filter 2.2s cubic-bezier(.3,.6,.2,1) .35s}
.project-vera.vf-in .vf-line>span{transform:none;transition:transform 1.05s cubic-bezier(.2,.75,.15,1) .55s}
.project-vera.vf-in .vf-line+.vf-line>span,
.project-vera.vf-in .vf-line ~ .vf-line>span{transition-delay:.68s}
.project-vera.vf-in .vf-index,
.project-vera.vf-in .vf-sub,
.project-vera.vf-in .vf-text,
.project-vera.vf-in .vf-facts,
.project-vera.vf-in .vf-cta{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.15,1)}
.project-vera.vf-in .vf-index{transition-delay:.45s}
.project-vera.vf-in .vf-sub{transition-delay:.9s}
.project-vera.vf-in .vf-text{transition-delay:1s}
.project-vera.vf-in .vf-facts{transition-delay:1.1s}
.project-vera.vf-in .vf-cta{transition-delay:1.2s}

/* Desktop: anchor the scene to the left edge so the candle cluster is never cropped. */
@media (min-width:821px){
  .project-vera{--vf-tx:0%}
  .vf-camera{left:0}
}

/* ---------- Tablet ---------- */
@media (max-width:1080px){
  .project-vera{padding:64px 36px!important}
  .vf-grade{background:
    linear-gradient(90deg,rgba(5,4,8,.92) 0%,rgba(5,4,8,.78) 32%,rgba(5,4,8,.25) 54%,rgba(5,4,8,0) 66%),
    radial-gradient(120% 120% at 62% 50%,transparent 60%,rgba(0,0,0,.45) 100%)}
}

/* ---------- Mobile: copy on top, laptop framed below ---------- */
@media (max-width:820px){
  .project-vera{
    --vf-tx:-63%;
    flex-direction:column;align-items:stretch;
    min-height:0;padding:44px 22px 0!important;
  }
  .vf-copy{max-width:none!important;order:1}
  .vf-stage{position:relative;order:2;inset:auto;height:clamp(260px,68vw,380px);margin:30px -22px 0}
  .vf-camera{width:max(190%,760px)}
  .vf-grade{background:
    linear-gradient(180deg,#07060a 0%,rgba(7,6,10,.35) 22%,transparent 40%,transparent 80%,rgba(5,4,8,.6) 100%)}
  .project-vera:not(.vf-armed) .vf-copy{position:relative}
  .vf-facts{gap:18px}
  .vf-fg-branch{width:58%;right:-10%;top:-12%}
}
@media (max-width:420px){
  .vf-title{font-size:46px!important}
  .vf-facts{font-size:10px}
}

/* ---------- Reduced motion: static, crisp, everything visible ---------- */
@media (prefers-reduced-motion:reduce){
  .vf-bar,.vf-atmos,.vf-smoke,.vf-petals{display:none}
  .project-vera .vf-grain,.project-vera .vf-screen-img{animation:none}
  .project-vera *{transition:none!important}
}