/* =========================================================
   RiNG STUDiO — Drohnenaufnahmen Wien
   Builds on style.css + cinema.css (b-pagehero, b-trailer,
   b-card/b-feature, b-process, b-final).
   ========================================================= */

/* ---------- hero: full-height aerial film with a drone HUD ---------- */
.dr-hero{ min-height:100vh; min-height:100svh; align-items:center; padding-top:120px; }
.dr-hero .b-pagehero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.dr-hero .b-pagehero-media video.is-front{ opacity:1; }
.dr-hero .dr-media-mobile{ display:none; }
@media (max-width:700px){
  .dr-hero .dr-media-desktop{ display:none; }
  .dr-hero .dr-media-mobile{ display:block; }
}
.dr-hero h1{ max-width:820px; }
.dr-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
@media (prefers-reduced-motion: no-preference){
  .b-js .dr-hero h1 .b-line:nth-child(3) > span{ animation-delay:1.05s; }
  .b-js .dr-hero-actions{ animation:bFadeUp 1s var(--ease) 1.3s both; }
  .b-js .dr-hud{ animation:bFade 1.2s ease 1.5s both; }
}

.dr-hud{ position:absolute; inset:96px 28px 34px; z-index:2; pointer-events:none; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; letter-spacing:.18em; color:rgba(245,241,236,.72); text-transform:uppercase; }
.dr-hud > i{ position:absolute; width:26px; height:26px; border:0 solid rgba(245,241,236,.45); }
.dr-hud > i:nth-of-type(1){ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.dr-hud > i:nth-of-type(2){ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.dr-hud > i:nth-of-type(3){ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.dr-hud > i:nth-of-type(4){ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.dr-hud-top, .dr-hud-bottom{ position:absolute; left:40px; right:40px; display:flex; justify-content:space-between; gap:20px; }
.dr-hud-top{ top:6px; }
.dr-hud-bottom{ bottom:6px; }
.dr-rec{ display:inline-flex; align-items:center; gap:8px; }
.dr-rec::before{ content:''; width:8px; height:8px; border-radius:50%; background:#e5484d; box-shadow:0 0 10px rgba(229,72,77,.8); animation:drBlink 1.2s steps(2, start) infinite; }
@keyframes drBlink{ to{ visibility:hidden; } }
.dr-cross{ position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; opacity:.4; }
.dr-cross::before, .dr-cross::after{ content:''; position:absolute; background:rgba(245,241,236,.7); }
.dr-cross::before{ left:50%; top:0; bottom:0; width:1px; }
.dr-cross::after{ top:50%; left:0; right:0; height:1px; }
/* Altimeter: climbs while you scroll through the page. */
.dr-alt{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:12px; }
.dr-alt-scale{ position:relative; width:6px; height:180px; border-right:1px solid rgba(245,241,236,.35);
  background:repeating-linear-gradient(180deg, rgba(245,241,236,.35) 0 1px, transparent 1px 18px); background-size:6px 18px; }
.dr-alt-scale b{ position:absolute; right:-1px; left:-6px; height:2px; bottom:calc(var(--alt, 0) * 1%); background:var(--cine); box-shadow:0 0 10px rgba(var(--cine-rgb), .8); transition:bottom .2s linear; }
.dr-alt-val{ min-width:68px; text-align:right; }
.dr-alt-val strong{ font-weight:500; font-size:15px; letter-spacing:.08em; color:#fff; }
@media (max-width:700px){
  .dr-hud{ inset:84px 14px 20px; font-size:9.5px; letter-spacing:.14em; }
  .dr-hud-top, .dr-hud-bottom{ left:30px; right:30px; }
  .dr-hud .dr-hide-sm{ display:none; }
  .dr-alt{ top:30%; }
  .dr-alt-val{ display:none; }
  .dr-alt-scale{ height:120px; }
  .dr-cross{ display:none; }
}

/* ---------- film gallery ---------- */
.dr-films{ display:grid; gap:20px; }
.dr-films-pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dr-films-pair .b-card.b-feature .b-card-meta b{ font-size:clamp(22px,2.2vw,32px); }
.dr-films-pair .b-card.b-feature{ aspect-ratio:2/1; }
.dr-films-pair .b-card.b-feature .b-card-play{ width:54px; height:54px; left:auto; right:18px; top:18px; margin:0; }
.dr-films-pair .b-card.b-feature .b-card-play::before{ border-left-width:13px; border-top-width:8px; border-bottom-width:8px; }
@media (max-width:900px){
  .dr-films-pair{ grid-template-columns:1fr; }
}

/* ---------- use cases ---------- */
.dr-uses{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; margin-top:44px; }
@media (max-width:820px){ .dr-uses{ grid-template-columns:1fr; } }
.dr-use{
  position:relative; overflow:hidden; isolation:isolate; border-radius:var(--radius-lg); border:1px solid var(--line);
  background:#0c0c0d; min-height:380px; display:flex; flex-direction:column; justify-content:flex-end; padding:30px;
  transition:border-color .4s ease, transform .6s var(--ease);
}
.dr-use-media{ position:absolute; inset:0; z-index:-2; }
.dr-use-media img, .dr-use-media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.6s var(--ease), filter .6s ease; filter:saturate(.85) brightness(.75); }
.dr-use::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,6,6,.15) 0%, rgba(6,6,6,.35) 40%, rgba(6,6,6,.92) 100%); }
.dr-use:hover{ border-color:rgba(var(--cine-rgb), .5); transform:translateY(-6px); }
.dr-use:hover .dr-use-media img, .dr-use:hover .dr-use-media video{ transform:scale(1.12); filter:saturate(1) brightness(.85); }
.dr-use-num{ position:absolute; top:24px; left:30px; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.7); }
.dr-use h3{ font-size:clamp(28px,3vw,38px); margin-bottom:10px; }
.dr-use p{ color:rgba(245,241,236,.78); max-width:460px; font-size:15px; }
.dr-use ul{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.dr-use li{ font-size:12px; letter-spacing:.06em; padding:6px 12px; border-radius:var(--pill); border:1px solid rgba(245,241,236,.22); color:rgba(245,241,236,.85); background:rgba(11,11,12,.35); backdrop-filter:blur(6px); }
.dr-use .dr-use-link{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cine-2); }
.dr-use .dr-use-link svg{ transition:transform .4s var(--ease); }
.dr-use .dr-use-link:hover svg{ transform:translateX(5px); }
@media (max-width:560px){ .dr-use{ min-height:340px; padding:24px; } .dr-use-num{ left:24px; } }

@media (prefers-reduced-motion: reduce){
  .dr-rec::before{ animation:none; }
  .dr-use, .dr-use-media img, .dr-use-media video{ transition:none; }
  .dr-use:hover{ transform:none; }
  .dr-hero .b-pagehero-media video{ transition:opacity .4s ease; }
}