/* ==========================================================
   THE WHITE ROSE RAVEN — V1.8 FLAGRACK FILM BAND (desk studio)
   Its own world: charcoal, warm bronze, muted gold, cream.
   No fog, no petals — precise, product-design mood.
   Layers (back → front):
     .ff-camera   desk scene + real flagrack.eu page on the display (matrix3d)
                  + edge glint + moving blinds shadow + lamp + screen spill
     .ff-dust     microscopic dust, visible only in the lamp cone
     .ff-grade    scene fades into charcoal on the right, where the copy sits
     .ff-grain / .ff-bar
   ========================================================== */

.project-flag{
  --ff-scale:1;--ff-px:0px;--ff-py:0px;--ff-screen:1;
  position:relative;display:flex!important;align-items:center;justify-content:flex-end;
  min-height:clamp(560px,44vw,660px);
  padding:72px 64px!important;margin:0;border:0;
  border-bottom:1px solid rgba(235,218,194,.10);border-radius:0;
  background:#0b0907!important;overflow:hidden;isolation:isolate;
}
.project-flag::before,.project-flag::after{content:none!important}

/* ---------- Stage / camera ---------- */
.ff-stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ff-camera{
  position:absolute;top:50%;left:-4%;
  height:104%;aspect-ratio:1672/941;
  transform-origin:46% 46%;
  transform:translateY(-50%) translate3d(var(--ff-px),var(--ff-py),0) scale(var(--ff-scale));
  will-change:transform;
  /* scene dissolves into charcoal toward the copy */
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 74%,rgba(0,0,0,.55) 86%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 74%,rgba(0,0,0,.55) 86%,transparent 100%);
}
.ff-scene{position:absolute;inset:0;width:100%;height:100%;display:block;filter:contrast(1.04) saturate(1.02)}

/* Real page on the display. JS sets width/height in px and a matrix3d that maps it onto
   the four measured display corners of the photo. */
.ff-screen{
  position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;
  background:#0a0a0a;
  filter:brightness(var(--ff-screen)) sepia(.06) contrast(1.02);
  backface-visibility:hidden;
}
.ff-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ff-screen::after{ /* screen vignette + warm room reflection */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 140% at 50% 40%,transparent 55%,rgba(0,0,0,.35) 100%),
    linear-gradient(180deg,rgba(255,190,120,.05),transparent 30%);
}
.ff-glass{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ff-glass::after{ /* slow reflection of the room passing over the glass */
  content:"";position:absolute;inset:-20% -60%;
  background:linear-gradient(105deg,transparent 42%,rgba(255,236,205,.10) 48%,rgba(255,236,205,.03) 52%,transparent 58%);
  transform:translateX(-60%);
}
.project-flag.ff-live .ff-glass::after{animation:ffReflect 11s cubic-bezier(.45,.05,.3,1) 2.5s infinite}
.project-flag.ff-sweep .ff-glass::after{animation:ffSheen 1.7s cubic-bezier(.3,.6,.2,1) both}
@keyframes ffReflect{0%,55%{transform:translateX(-60%);opacity:0}60%{opacity:1}100%{transform:translateX(60%);opacity:0}}
@keyframes ffSheen{0%{transform:translateX(-60%);opacity:0}15%{opacity:1}100%{transform:translateX(60%);opacity:0}}

/* Demo cursor: glides to the main CTA, clicks, then to CONFIGURE (positions in % of the page) */
.ff-cursor{position:absolute;width:2.6%;left:62%;top:58%;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.ff-click{position:absolute;left:18.3%;top:75.5%;width:4.5%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);border:2px solid rgba(255,236,200,.9);opacity:0}
.project-flag.ff-live .ff-cursor{animation:ffCursor 9s cubic-bezier(.45,.05,.25,1) 3.4s infinite}
.project-flag.ff-live .ff-click{animation:ffClick 9s ease-out 3.4s infinite}
@keyframes ffCursor{
  0%{left:62%;top:58%;opacity:0}6%{opacity:1}
  30%{left:18.6%;top:76%;transform:scale(1)}34%{transform:scale(.82)}38%{left:18.6%;top:76%;transform:scale(1)}
  62%{left:86.5%;top:4.8%;opacity:1}70%{left:86.5%;top:4.8%;opacity:1}
  78%,100%{left:88%;top:9%;opacity:0}
}
@keyframes ffClick{0%,32%{transform:translate(-50%,-50%) scale(0);opacity:0}34%{transform:translate(-50%,-50%) scale(.4);opacity:1}44%{transform:translate(-50%,-50%) scale(1.6);opacity:0}100%{opacity:0}}

/* Micro reflection running along the top edge of the lid (photo coords: y≈18.8%, x 32%→78%) */
.ff-edge{
  position:absolute;left:31.8%;top:18.4%;width:46.6%;height:.5%;
  transform:rotate(-.55deg);transform-origin:0 50%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,226,180,.0) 40%,rgba(255,232,190,.85) 50%,rgba(255,226,180,0) 60%,transparent 100%);
  background-size:260% 100%;background-position:130% 0;
  mix-blend-mode:screen;filter:blur(.6px);opacity:0;
}
.project-flag.ff-live .ff-edge{animation:ffEdge 13s ease-in-out 6s infinite}
@keyframes ffEdge{0%,70%{background-position:130% 0;opacity:0}74%{opacity:1}96%{opacity:1}100%{background-position:-30% 0;opacity:0}}

/* Light through blinds drifting very slowly over the back wall (upper-left of the photo) */
.ff-blinds{
  position:absolute;left:-10%;top:-10%;width:75%;height:75%;
  background:repeating-linear-gradient(-26deg,transparent 0 3.2%,rgba(255,170,90,.16) 3.6%,rgba(255,180,100,.20) 4.6%,rgba(255,170,90,.06) 5.6%,transparent 6%);
  mix-blend-mode:soft-light;
  -webkit-mask-image:radial-gradient(55% 60% at 40% 40%,#000 25%,transparent 80%);
  mask-image:radial-gradient(55% 60% at 40% 40%,#000 25%,transparent 80%);
  opacity:.9;
}
.project-flag.ff-live .ff-blinds{animation:ffBlinds 26s ease-in-out infinite alternate}
@keyframes ffBlinds{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(4%,2.5%,0)}}

/* Desk lamp: warm pool and a barely-there breathing (it's electric, it doesn't flicker) */
.ff-lamp{
  position:absolute;inset:0;
  background:
    radial-gradient(9% 7% at 88% 14%,rgba(255,206,140,.32),transparent 70%),
    radial-gradient(26% 30% at 86% 52%,rgba(255,170,90,.10),transparent 72%);
  mix-blend-mode:screen;
}
.project-flag.ff-live .ff-lamp{animation:ffLamp 7s ease-in-out infinite}
@keyframes ffLamp{0%,100%{opacity:.85}50%{opacity:1}}
/* Warm-neutral spill of the screen on the desk in front of the laptop */
.ff-screen-spill{
  position:absolute;left:30%;top:68%;width:50%;height:20%;
  background:radial-gradient(50% 50% at 50% 30%,rgba(255,226,186,.16),transparent 70%);
  mix-blend-mode:screen;opacity:calc((var(--ff-screen) - .1) * .9);
}

/* ---------- Dust: only inside the lamp cone ---------- */
.ff-dust{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}

/* ---------- Grade ---------- */
.ff-grade{
  position:absolute;inset:0;
  background:
    linear-gradient(270deg,rgba(11,9,7,.96) 0%,rgba(11,9,7,.88) 26%,rgba(11,9,7,.35) 40%,rgba(11,9,7,0) 50%),
    linear-gradient(180deg,rgba(11,9,7,.35) 0%,transparent 14%,transparent 84%,rgba(11,9,7,.55) 100%),
    radial-gradient(120% 120% at 34% 50%,transparent 60%,rgba(0,0,0,.45) 100%);
}
.ff-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:.06;mix-blend-mode:overlay;
}
.project-flag.ff-live .ff-grain{animation:vfGrain .9s steps(6) infinite}
.ff-bar{position:absolute;left:0;right:0;height:0;background:#050403;z-index:2}
.ff-bar-top{top:0}.ff-bar-bottom{bottom:0}

/* ---------- Copy (mirrors Vera) ---------- */
.ff-copy{position:relative;z-index:3;max-width:470px!important;padding:0!important}
.ff-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)}
.ff-index span{font-family:var(--display);font-size:14px;letter-spacing:.06em;color:var(--gold-2)}
.ff-index::after{content:"";width:42px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.ff-title{
  margin:0 0 14px!important;font-family:var(--display);font-weight:500;
  font-size:clamp(46px,4.7vw,72px)!important;line-height:.98!important;letter-spacing:.035em!important;
  text-transform:uppercase;white-space:nowrap;color:#f6efe6;text-shadow:0 10px 40px rgba(0,0,0,.55);
}
.ff-line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.ff-line>span{display:inline-block}
.ff-sub{margin:0 0 22px!important;font-size:11px!important;font-weight:600;letter-spacing:.3em!important;text-transform:uppercase;color:var(--gold)!important}
.ff-text{font-size:14.5px!important;line-height:1.75!important;color:rgba(245,240,233,.72)!important;max-width:420px;margin:0 0 24px!important}
.ff-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)}
.ff-facts li{display:grid;gap:3px}
.ff-facts b{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.02em;color:#efe4d4}
.ff-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;
}
.ff-cta span{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ff-cta:hover{color:#f3ddba;background-size:0% 1px;background-position:100% 100%}
.ff-cta:hover span{transform:translateX(6px)}
.ff-cta:focus-visible{outline:1px solid var(--gold);outline-offset:6px}


/* ---------- Product strip: real FlagRack lineup 2F · 3F · 4F ---------- */
.ff-lineup{display:flex;align-items:center;gap:1.6em;flex-wrap:wrap;margin:0 0 30px;font-size:9.5px}
.ff-model{display:flex;align-items:center;gap:.8em}
.ff-model-k{font-family:var(--sans);font-weight:700;font-size:1.35em;letter-spacing:.02em;color:#d6a957}
.ff-pin{position:relative;display:flex;gap:.3em;padding:.16em;perspective:14em;filter:drop-shadow(0 .4em .6em rgba(0,0,0,.5))}
.ff-pin::after{
  content:"";position:absolute;inset:-.1em;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,240,200,.55) 48%,transparent 60%);
  background-size:260% 100%;background-position:120% 0;mix-blend-mode:screen;opacity:0;
}
.ff-pin.is-glint::after{animation:ffGlint .9s ease-out}
@keyframes ffGlint{0%{background-position:120% 0;opacity:1}100%{background-position:-30% 0;opacity:1}}
.ff-flag{
  position:relative;display:block;width:3.2em;height:2.1em;border-radius:.16em;
  background-size:100% 100%;background-position:center;background-color:#fff;
  box-shadow:0 0 0 .14em #c99d4b,0 0 0 .2em rgba(110,74,24,.9),inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(0,0,0,.12);
  transform-origin:50% 0;transition:transform .32s cubic-bezier(.5,0,.75,0),opacity .32s;
}
.ff-flag::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(170deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%,rgba(0,0,0,.12))}
.ff-flag.is-out{transform:translateY(-18%) rotateX(80deg);opacity:.2}
.ff-flag.is-in{transition:transform .42s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.ff-flag[data-flag="de"]{background-image:linear-gradient(#000 33.4%,#dd0000 0 66.7%,#ffce00 0)}
.ff-flag[data-flag="fr"]{background-image:linear-gradient(90deg,#0055a4 33.4%,#fff 0 66.7%,#ef4135 0)}
.ff-flag[data-flag="it"]{background-image:linear-gradient(90deg,#009246 33.4%,#fff 0 66.7%,#ce2b37 0)}
.ff-flag[data-flag="hu"]{background-image:linear-gradient(#ce2939 33.4%,#fff 0 66.7%,#477050 0)}
.ff-flag[data-flag="es"]{background-image:linear-gradient(#aa151b 25%,#f1bf00 0 75%,#aa151b 0)}
.ff-flag[data-flag="nl"]{background-image:linear-gradient(#ae1c28 33.4%,#fff 0 66.7%,#21468b 0)}
.ff-flag[data-flag="at"]{background-image:linear-gradient(#c8102e 33.4%,#fff 0 66.7%,#c8102e 0)}
.ff-flag[data-flag="pl"]{background-image:linear-gradient(#fff 50%,#dc143c 0)}
.ff-flag[data-flag="gb"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' preserveAspectRatio='none'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
.ff-flag[data-flag="sk"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6' preserveAspectRatio='none'%3E%3Cpath fill='%23ee1c25' d='M0 0h9v6H0z'/%3E%3Cpath fill='%230b4ea2' d='M0 0h9v4H0z'/%3E%3Cpath fill='%23fff' d='M0 0h9v2H0z'/%3E%3Cpath fill='%23fff' d='M1.2 1.05h3.05v2.35c0 1.35-.95 2.05-1.525 2.35C2.15 5.45 1.2 4.75 1.2 3.4z'/%3E%3Cpath fill='%23ee1c25' d='M1.42 1.25h2.61v2.15c0 1.15-.78 1.78-1.305 2.08-.525-.3-1.305-.93-1.305-2.08z'/%3E%3Cpath fill='%23fff' d='M2.58 1.62h.29v2.55h-.29zM2.12 2.1h1.21v.27H2.12zM2.0 2.72h1.45v.3H2.0z'/%3E%3Cpath fill='%230b4ea2' d='M1.55 4.15c.28-.38.6-.38.86 0 .26-.45.6-.45.86 0 .28-.38.6-.38.86 0-.12.6-.86 1.05-1.3 1.32-.45-.27-1.15-.72-1.28-1.32z'/%3E%3C/svg%3E")}
.ff-flag[data-flag="cz"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4' preserveAspectRatio='none'%3E%3Cpath fill='%23d7141a' d='M0 0h6v4H0z'/%3E%3Cpath fill='%23fff' d='M0 0h6v2H0z'/%3E%3Cpath fill='%2311457e' d='M0 0l3 2-3 2z'/%3E%3C/svg%3E")}

/* ---------- Entrance: the frame "assembles" ---------- */
.project-flag.ff-armed .ff-bar{height:50.5%}
.project-flag.ff-armed .ff-scene{filter:contrast(1.04) saturate(.4) brightness(.25) blur(6px)}
.project-flag.ff-armed{--ff-screen:.04}
.project-flag.ff-armed .ff-line>span{transform:translateY(108%)}
.project-flag.ff-armed .ff-index,.project-flag.ff-armed .ff-sub,.project-flag.ff-armed .ff-text,
.project-flag.ff-armed .ff-facts,.project-flag.ff-armed .ff-lineup,.project-flag.ff-armed .ff-cta{opacity:0;transform:translateY(14px)}
.project-flag.ff-armed .ff-index::after{transform:scaleX(0)}

.project-flag.ff-in .ff-bar{height:0;transition:height 1.25s cubic-bezier(.7,0,.2,1)}
.project-flag.ff-in .ff-scene{transition:filter 2s cubic-bezier(.3,.6,.2,1) .3s}
.project-flag.ff-in .ff-screen{transition:filter 1.3s ease}
.project-flag.ff-in .ff-line>span{transform:none;transition:transform 1.05s cubic-bezier(.2,.75,.15,1) .55s}
.project-flag.ff-in .ff-index,.project-flag.ff-in .ff-sub,.project-flag.ff-in .ff-text,
.project-flag.ff-in .ff-facts,.project-flag.ff-in .ff-lineup,.project-flag.ff-in .ff-cta{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.15,1)}
.project-flag.ff-in .ff-index{transition-delay:.45s}
.project-flag.ff-in .ff-index::after{transform:none;transform-origin:left;transition:transform 1s cubic-bezier(.2,.75,.15,1) .8s}
.project-flag.ff-in .ff-sub{transition-delay:.9s}
.project-flag.ff-in .ff-text{transition-delay:1s}
.project-flag.ff-in .ff-facts{transition-delay:1.1s}
.project-flag.ff-in .ff-lineup{transition-delay:1.2s}
.project-flag.ff-in .ff-cta{transition-delay:1.3s}

/* ---------- Narrower desktops: keep the laptop clear of the copy ---------- */
@media (max-width:1400px){ .ff-camera{left:-8%} .ff-copy{max-width:410px!important} }

/* ---------- Tablet & mobile: copy on top, scene below ---------- */
@media (max-width:1180px){
  .project-flag{flex-direction:column;align-items:stretch;min-height:0;padding:56px 36px 0!important}
  .ff-copy{max-width:640px!important;order:1}
  .ff-stage{position:relative;order:2;inset:auto;height:clamp(260px,58vw,560px);margin:34px -36px 0}
  .ff-camera{left:50%;height:auto;width:max(118%,calc(clamp(260px,58vw,560px) * 2.05));transform:translate(-53%,-50%) translate3d(var(--ff-px),var(--ff-py),0) scale(var(--ff-scale));-webkit-mask-image:none;mask-image:none}
  .ff-grade{background:linear-gradient(180deg,#0b0907 0%,rgba(11,9,7,.35) 18%,transparent 34%,transparent 82%,rgba(11,9,7,.6) 100%)}
}
@media (max-width:820px){
  .project-flag{padding:44px 22px 0!important}
  .ff-stage{margin:30px -22px 0;height:clamp(240px,66vw,420px)}
  .ff-camera{width:max(150%,calc(clamp(240px,66vw,420px) * 2.2))}
}
@media (max-width:420px){
  .ff-title{font-size:44px!important}
  .ff-facts{font-size:10px;gap:16px}
  .ff-lineup{font-size:8px;gap:1.2em}
}

@media (prefers-reduced-motion:reduce){
  .ff-bar,.ff-dust,.ff-cursor,.ff-click,.ff-edge{display:none}
  .project-flag .ff-grain,.project-flag .ff-blinds,.project-flag .ff-lamp{animation:none}
  .project-flag *{transition:none!important}
}