/* ==========================================================
   THE WHITE ROSE RAVEN — V1.9 sections under the film bands
   1) "Web má odviesť tri veci" — lake + white roses panel
   2) Services — three illustrated cards
   ========================================================== */

/* ---------- 1) Principles panel ---------- */
.principles-section{padding:56px 0 40px}
.principles-section::before{background:linear-gradient(180deg,rgba(5,7,11,.86),rgba(5,7,11,.80))}
.principles-panel{
  position:relative;isolation:isolate;overflow:hidden;
  padding:64px 56px 52px;
  border:1px solid rgba(235,218,194,.10);
  background:#07080b;
}
.principles-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.principles-bg img,.principles-bg canvas{
  position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;object-position:70% 50%;
  transform:translate3d(0,var(--pb-y,0px),0) scale(var(--pb-s,1.04));
  will-change:transform;
}
.principles-bg canvas{display:block}

/* Readability: dark on the left for the heading, dark band at the bottom for the three columns */
.pb-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,7,10,.94) 0%,rgba(6,7,10,.78) 30%,rgba(6,7,10,.25) 58%,rgba(6,7,10,0) 72%),
    linear-gradient(180deg,rgba(6,7,10,.25) 0%,transparent 30%,rgba(6,7,10,.55) 62%,rgba(6,7,10,.86) 100%);
}

.principles-panel .section-head{margin-bottom:46px}
.principles-panel .section-head h2{font-size:clamp(40px,3.9vw,58px);line-height:1.06;margin:0;text-shadow:0 8px 30px rgba(0,0,0,.5)}
.principles-panel .section-head h2 em{font-style:italic;color:rgba(228,214,196,.72);font-weight:400}
.principles-panel .eyebrow{color:var(--gold);font-size:10px;letter-spacing:.2em;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(200,167,120,.35)}
.principles-panel .principles-grid{border:0}
.principles-panel .principle{min-height:0;padding:0 34px 0 0;border:0}
.principles-panel .principle+.principle{padding-left:34px;border-left:1px solid rgba(235,218,194,.12)}
.principles-panel .principle-num{
  display:flex;align-items:center;gap:18px;
  font-family:var(--display);font-size:46px;font-weight:400;line-height:1;margin-bottom:22px;
  color:rgba(215,185,145,.5);
}
.principles-panel .principle-num::after{content:"";flex:0 0 64px;height:1px;background:linear-gradient(90deg,rgba(215,185,145,.45),transparent)}
.principles-panel .principle h3{font-size:24px;margin:0 0 12px;color:#f3ebe0}
.principles-panel .principle p{font-size:13px;line-height:1.7;color:rgba(245,240,233,.66);max-width:300px;margin:0}

/* entrance: numbers count in, rules draw */
.principles-panel .principle.reveal .principle-num::after{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.75,.15,1) .3s}
.principles-panel .principle.reveal.is-visible .principle-num::after{transform:none}
.principles-panel .principle.reveal:nth-child(2){transition-delay:.12s}
.principles-panel .principle.reveal:nth-child(3){transition-delay:.24s}

@media (max-width:820px){
  .principles-panel{padding:44px 24px 38px}
  .principles-bg img,.principles-bg canvas{object-position:78% 50%}
  .pb-shade{background:
    linear-gradient(180deg,rgba(6,7,10,.55) 0%,rgba(6,7,10,.35) 30%,rgba(6,7,10,.80) 55%,rgba(6,7,10,.92) 100%)}
  .principles-panel .principle,.principles-panel .principle+.principle{padding:26px 0;border-left:0;border-top:1px solid rgba(235,218,194,.12)}
  .principles-panel .principle:first-child{border-top:0;padding-top:0}
  .principles-panel .principle-num{font-size:38px}
}

/* ---------- 2) Services cards ---------- */
.services-section{padding:40px 0 78px}
.services-master-head .eyebrow{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gold-2)}
.services-master-head>a{font-size:9px!important;letter-spacing:.16em;color:var(--gold)!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(200,167,120,.3)}
.services-grid{grid-template-columns:repeat(3,1fr)!important;gap:18px!important}
.service-card{
  position:relative;display:flex!important;flex-direction:column;
  border-radius:12px!important;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,12,12,.92),rgba(8,8,10,.94))!important;
  border:1px solid rgba(235,218,194,.12)!important;
  transition:transform .5s cubic-bezier(.2,.75,.15,1),border-color .4s ease,box-shadow .5s ease!important;
}
.service-card:hover{transform:translateY(-6px)!important;border-color:rgba(228,203,166,.32)!important;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 40px rgba(200,150,90,.06)}
.service-visual{position:relative;height:190px!important;overflow:hidden;border-bottom:1px solid rgba(235,218,194,.10)!important;background:#0a0908}
.service-visual img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s cubic-bezier(.2,.75,.15,1),filter .6s ease;filter:brightness(.9) saturate(1.02)}
.service-card:hover .service-visual img{transform:scale(1.08);filter:brightness(1.02) saturate(1.06)}
.service-visual::after{ /* soft fade into the card + light sweep on hover */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 55%,rgba(10,9,9,.75) 100%),
    linear-gradient(105deg,transparent 40%,rgba(255,232,200,.14) 49%,transparent 58%) no-repeat;
  background-size:100% 100%,260% 100%;
  background-position:0 0,130% 0;
  transition:background-position 1.1s cubic-bezier(.3,.6,.2,1);
}
.service-card:hover .service-visual::after{background-position:0 0,-30% 0}
.service-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px!important}
.service-body>span{display:none}
.service-body h3{font-family:var(--display);font-size:clamp(19px,1.6vw,23px)!important;font-weight:500;text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px!important;color:#f4ece2}
.service-body p{font-size:14px!important;line-height:1.55!important;color:rgba(245,240,233,.68)!important;min-height:44px!important;margin:0 0 16px!important;font-family:var(--display)}
.service-body strong{display:block;font-family:var(--display);font-size:15px!important;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)!important;margin:auto 0 18px!important}
.service-btn{
  align-self:flex-start;display:inline-flex!important;align-items:center;gap:12px;
  padding:11px 26px!important;border-radius:999px;
  border:1px solid rgba(200,167,120,.45);background:rgba(200,167,120,.04);
  font-size:9.5px!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#efe2cc!important;
  transition:background .3s ease,border-color .3s ease,color .3s ease,gap .3s ease;
}
.service-btn:hover{background:rgba(200,167,120,.14);border-color:rgba(228,203,166,.8);gap:16px}
.service-btn span{font-size:13px}
.services-grid .service-card.reveal:nth-child(2){transition-delay:.1s}
.services-grid .service-card.reveal:nth-child(3){transition-delay:.2s}

@media (max-width:980px){
  .services-grid{grid-template-columns:1fr 1fr!important}
  .services-grid .service-card:last-child{grid-column:1/-1}
}
@media (max-width:620px){
  .services-grid{grid-template-columns:1fr!important}
  .service-visual{height:200px!important}
}
@media (prefers-reduced-motion:reduce){
  .service-visual img,.service-visual::after{transition:none}
}


/* ==========================================================
   V2.0 — living scenes (WebGL, assets/js/living-scene.js)
   The <img> stays underneath as the instant/fallback frame.
   ========================================================== */
.studio-living{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;opacity:0;transition:opacity .8s ease}
.studio-fixed-scene.is-living .studio-living{opacity:1}
.studio-fixed-scene.is-living .studio-water-overlay{display:none}
.cta-living,.tm-living{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.is-living>.cta-living,.is-living>.tm-living,.is-living>.pb-living{opacity:1}
.pb-living{opacity:0;transition:opacity .8s ease}

/* Living raven (assets/js/raven-puppet.js): WebGL-warped cut-out over a clean plate */
.studio-raven-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.studio-raven-3d.is-puppet .studio-raven-float{opacity:0}

/* ---------- Testimonial (mockup) ---------- */
.testimonial-section{padding:30px 0 34px!important}
.testimonial-section::before{background:linear-gradient(180deg,rgba(5,7,10,.86),rgba(5,7,10,.84))!important}
.testimonial-shell{
  display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;align-items:center;gap:52px;
  min-height:0!important;background:none!important;border:0!important;padding:0!important;
}
.testimonial-art{position:relative;min-height:0!important;aspect-ratio:16/9.6;border-radius:4px 4px 40px 4px;overflow:hidden;border:1px solid rgba(235,218,194,.10);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.testimonial-art img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;opacity:1!important;left:0!important;bottom:auto!important}
.testimonial-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 70%,rgba(5,7,10,.35));z-index:2}
.testimonial-copy{padding:0!important}
.testimonial-copy .eyebrow{display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:.2em;color:var(--gold)}
.testimonial-copy .eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(217,188,148,.3),transparent)}
.testimonial-copy blockquote{font-size:clamp(22px,2vw,31px)!important;line-height:1.38!important;margin:0 0 22px!important;color:#f1e9de;max-width:620px}
.testimonial-copy cite{display:flex;align-items:center;gap:12px;font-style:normal;font-family:var(--display);font-size:15px!important;color:var(--gold-2);letter-spacing:.02em}
.testimonial-copy cite::before{content:"";width:22px;height:1px;background:var(--gold)}
@media (max-width:820px){.testimonial-shell{grid-template-columns:1fr!important;gap:30px}}

/* ---------- Final CTA panel (mockup) ---------- */
.final-cta{padding:30px 0 0!important;text-align:center}
.final-cta::before{background:linear-gradient(180deg,rgba(5,7,10,.84),rgba(5,7,10,.9))!important}
.final-cta-panel{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,34vw,520px);display:grid;place-items:center;border-top:1px solid rgba(235,218,194,.10);border-bottom:1px solid rgba(235,218,194,.10)}
.cta-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-shade{position:absolute;inset:0;background:
  radial-gradient(46% 62% at 50% 46%,rgba(6,7,10,.70),rgba(6,7,10,.35) 60%,transparent 85%),
  linear-gradient(180deg,rgba(6,7,10,.5) 0%,transparent 22%,transparent 78%,rgba(6,7,10,.6) 100%)}
.final-cta-inner{max-width:760px;padding:60px 24px}
.cta-emblem{width:34px;height:34px;color:var(--gold-2);margin:0 auto 16px;display:block;opacity:.85}
.cta-bg.is-living~.final-cta-inner .cta-emblem{animation:ctaEmblem 22s linear infinite}
@keyframes ctaEmblem{to{transform:rotate(360deg)}}
.final-cta .eyebrow{font-size:10px;letter-spacing:.22em;color:var(--gold-2);margin-bottom:16px}
.final-cta h2{font-size:clamp(32px,3.4vw,50px)!important;line-height:1.14!important;margin:0 0 30px!important;color:#f6efe6;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.final-actions{justify-content:center}
@media (max-width:820px){.final-cta-panel{min-height:460px}.final-cta h2{font-size:32px!important}}
@media (prefers-reduced-motion:reduce){.cta-bg .cta-emblem,.final-cta-inner .cta-emblem{animation:none!important}}

/* ==========================================================
   V3.1 — no-WebGL fallback (html.no-webgl set by site-health.js)
   ========================================================== */
.no-webgl .ab-living,.no-webgl .studio-living,.no-webgl .pb-living,.no-webgl .tm-living,.no-webgl .cta-living,.no-webgl .vf-smoke{display:none!important}
.no-webgl .ab-scene-img,.no-webgl .principles-bg img,.no-webgl .cta-bg img,.no-webgl .testimonial-art img{animation:twrrDrift 38s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes twrrDrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1.2%,-.6%,0)}}
.no-webgl .ab-scene::after,.no-webgl .cta-bg::after,.no-webgl .testimonial-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(40% 30% at 20% 60%,rgba(255,170,90,.10),transparent 70%),radial-gradient(35% 28% at 85% 55%,rgba(255,170,90,.08),transparent 70%);
  animation:twrrGlow 3.2s ease-in-out infinite alternate}
@keyframes twrrGlow{0%{opacity:.55}35%{opacity:.85}60%{opacity:.6}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.no-webgl .ab-scene-img,.no-webgl .principles-bg img,.no-webgl .cta-bg img,.no-webgl .testimonial-art img,.no-webgl .ab-scene::after{animation:none}}