/* hafen.digital — Motion & Atmosphäre: Bremerhaven-Szenen, Glow-Ringe, Lichter, Reveal-Animationen */
@property --hd-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- Abgedunkelte Bremerhaven-Szenen hinter Sektionen ---------- */
.hd-scene-bg{position:relative;isolation:isolate;overflow:hidden}
.hd-scene-bg::before{content:'';position:absolute;inset:-6% 0;z-index:-2;background:var(--scene) center/cover no-repeat;opacity:.32;filter:saturate(1.2) contrast(1.05);transform:translate3d(0,var(--hd-par,0px),0) scale(1.08);will-change:transform}
.hd-scene-bg::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#040a13 0%,rgba(4,10,19,.55) 18%,rgba(4,10,19,.6) 82%,#040a13 100%),radial-gradient(ellipse at 80% 20%,rgba(33,206,242,.10),transparent 60%)}

/* ---------- Referenz-Karten mit echter Website im Hintergrund ---------- */
.hd-ref-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.hd-ref-card{--glow:#2bd6ff;--glow-soft:rgba(43,214,255,.35);position:relative;isolation:isolate;border-radius:22px;overflow:hidden;min-height:430px;display:flex;
  background:#06101c;border:1px solid rgba(120,200,235,.14);box-shadow:0 30px 70px rgba(0,0,0,.45);transform:translateY(0);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.hd-ref-card[data-glow=gold]{--glow:#f2c96b;--glow-soft:rgba(242,201,107,.32)}
.hd-ref-card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 60px var(--glow-soft)}
.hd-ref-bg{position:absolute;inset:0;z-index:-3;background:var(--ref-bg) center top/cover no-repeat;filter:brightness(.3) saturate(1.15) blur(1.5px);transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.8,.2,1),filter .8s}
.hd-ref-card:hover .hd-ref-bg{transform:scale(1.14) translateY(-2%);filter:brightness(.42) saturate(1.25) blur(0)}
.hd-ref-card::after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(4,10,19,.2) 0%,rgba(4,10,19,.72) 38%,rgba(4,10,19,.95) 100%)}
.hd-ref-ring{position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--hd-a),transparent 0 62%,var(--glow) 74%,#fff 78%,var(--glow) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.55;animation:hd-spin 6s linear infinite;transition:opacity .4s}
.hd-ref-card:hover .hd-ref-ring{opacity:1;animation-duration:2.6s}
@keyframes hd-spin{to{--hd-a:360deg}}
.hd-ref-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,30%),var(--glow-soft),transparent 60%)}
.hd-ref-card:hover .hd-ref-spot{opacity:.9}
.hd-ref-body{position:relative;display:flex;flex-direction:column;gap:16px;padding:30px 32px 26px;width:100%;margin-top:auto}
.hd-ref-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hd-ref-tags{display:flex;gap:7px;flex-wrap:wrap}
.hd-ref-tags span{font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#d8eef8;padding:7px 10px;border-radius:999px;background:rgba(6,18,30,.6);border:1px solid rgba(160,215,240,.22);backdrop-filter:blur(8px)}
.hd-ref-tags span:first-child{color:var(--glow);border-color:color-mix(in srgb,var(--glow) 55%,transparent)}
.hd-ref-kind{font:500 12px/1.3 Inter,system-ui,sans-serif;color:#a9bfcf}
.hd-ref-title{margin:6px 0 0;display:flex;align-items:center;gap:14px;min-height:64px}
.hd-ref-logo{display:block;width:auto;filter:drop-shadow(0 0 18px var(--glow-soft));transition:filter .4s,transform .4s}
.hd-ref-logo.is-wide{height:58px}
.hd-ref-logo.is-text{height:42px;order:2}
.hd-ref-mark{height:72px;width:auto;order:1;filter:drop-shadow(0 0 16px var(--glow-soft));animation:hd-float 6s ease-in-out infinite}
.hd-ref-card:hover .hd-ref-logo{transform:scale(1.03);filter:drop-shadow(0 0 26px var(--glow))}
.hd-ref-text{margin:0;color:#d3e2ec;font-size:15px;line-height:1.65;max-width:560px}
.hd-ref-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px;border-radius:14px;background:rgba(4,12,22,.62);border:1px solid rgba(140,200,230,.14);backdrop-filter:blur(10px)}
.hd-ref-facts strong{display:block;font:800 19px/1.2 Inter,system-ui,sans-serif;color:var(--glow);letter-spacing:-.01em}
.hd-ref-facts span{font-size:12.5px;color:#9fb4c4}
.hd-ref-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:6px}
.hd-ref-link{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font:700 13.5px/1 Inter,system-ui,sans-serif;color:#03111b!important;background:var(--glow);text-decoration:none!important;box-shadow:0 0 0 0 var(--glow-soft);transition:box-shadow .3s,transform .3s}
.hd-ref-link:hover{transform:translateY(-2px);box-shadow:0 0 0 6px var(--glow-soft),0 10px 30px var(--glow-soft)}
.hd-ref-more{font:600 13px/1 Inter,system-ui,sans-serif;color:#c4d6e2!important;text-decoration:none!important;border-bottom:1px solid rgba(196,214,226,.35);padding-bottom:3px}
.hd-ref-more:hover{color:#fff!important;border-color:var(--glow)}
@media(max-width:1000px){.hd-ref-grid{grid-template-columns:1fr}}
@media(max-width:520px){.hd-ref-body{padding:24px 20px 22px}.hd-ref-logo.is-wide{height:44px}.hd-ref-mark{height:56px}.hd-ref-logo.is-text{height:32px}.hd-ref-card{min-height:400px}}

/* Referenzseite: echte Screenshots + Glow */
.hd-glow-card{position:relative;isolation:isolate}
.hd-glow-card .hd-ref-ring{z-index:3}
.hd-glow-card{--glow:#2bd6ff;--glow-soft:rgba(43,214,255,.3)}
.hd-glow-card[data-glow=gold]{--glow:#f2c96b;--glow-soft:rgba(242,201,107,.3)}
.hd-glow-card:hover .hd-ref-ring{opacity:1;animation-duration:2.6s}
.hd-shot{position:relative;border-radius:14px;overflow:hidden}
.hd-shot img{transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .6s;filter:brightness(.82)}
.hd-glow-card:hover .hd-shot img{transform:scale(1.06);filter:brightness(1)}
.hd-proj-logo{display:block;height:48px;width:auto;margin:4px 0 10px;filter:drop-shadow(0 0 16px var(--glow-soft))}
.hd-proj-logo-row{display:flex;align-items:center;gap:12px}
.hd-proj-logo-row .hd-ref-mark{height:60px}

/* ---------- Lichter über der Hero-Skyline ---------- */
.hd-lights{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hd-lights i{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:#bff4ff;box-shadow:0 0 6px 2px rgba(80,220,255,.8),0 0 18px 4px rgba(33,206,242,.35);opacity:0;animation:hd-twinkle var(--t,4s) ease-in-out var(--d,0s) infinite}
.hd-lights i.warm{background:#ffe3a3;box-shadow:0 0 6px 2px rgba(255,200,110,.8),0 0 16px 4px rgba(255,180,80,.3)}
@keyframes hd-twinkle{0%,100%{opacity:0;transform:scale(.6)}45%{opacity:.95;transform:scale(1)}60%{opacity:.6}}
.hd-sweep{position:absolute;inset:-20% -40%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(120,230,255,.07) 49%,rgba(255,255,255,.10) 50%,rgba(120,230,255,.07) 51%,transparent 58%);animation:hd-sweep 11s ease-in-out 1.5s infinite}
@keyframes hd-sweep{0%{transform:translateX(-45%)}55%,100%{transform:translateX(45%)}}

/* ---------- Glow-Ring am Haupt-Button ---------- */
.hd-hero-button-primary,.hd-header-cta{position:relative}
.hd-hero-button-primary::after,.hd-header-cta::after{content:'';position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(66,223,250,.7);opacity:0;animation:hd-ping 2.8s cubic-bezier(.2,.7,.3,1) infinite;pointer-events:none}
.hd-header-cta::after{animation-delay:1.4s}
@keyframes hd-ping{0%{opacity:.75;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.18,1.45)}}
@keyframes hd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- Spotlight auf allen Karten ---------- */
.hd-spot{position:relative;isolation:isolate}
.hd-spot::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(33,206,242,.13),transparent 65%)}
.hd-spot:hover::before{opacity:1}

/* ---------- Scroll-Reveal ---------- */
.hd-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rd,0ms)}
.hd-reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .hd-ref-ring,.hd-lights i,.hd-sweep,.hd-ref-mark,.hd-hero-button-primary::after,.hd-header-cta::after{animation:none!important}
  .hd-lights,.hd-sweep{display:none}
  .hd-reveal{opacity:1;transform:none;transition:none}
  .hd-scene-bg::before{transform:scale(1.08)}
}
.hd-proj-logo-row .hd-ref-mark{order:0}.hd-proj-logo-row .hd-proj-logo{order:1}
.hd-glow-card[data-glow=gold] a.bg-brand-cyan{background:#f2c96b!important;color:#1a1204!important}

/* ---------- Alle Karten: abgedunkeltes Hafenbild + dezenter Laser-Ring ---------- */
.hd-card-fx{overflow:hidden}
.hd-card-bg{position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;background-size:cover;background-position:var(--bp,center);
  filter:brightness(.2) saturate(1.1) blur(1px);opacity:.75;transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .7s,opacity .7s}
.hd-card-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,26,.35),rgba(6,14,26,.85))}
.hd-card-fx:hover .hd-card-bg{transform:scale(1.12);filter:brightness(.3) saturate(1.2) blur(0);opacity:.95}
.hd-ring-soft{opacity:.22;padding:1px;animation-duration:9s}
.hd-card-fx:hover .hd-ring-soft{opacity:.75;animation-duration:3.5s}

/* ---------- Licht-Cursor auf der ganzen Seite ---------- */
.hd-cursor{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:9998;
  background:radial-gradient(circle,rgba(70,225,255,.11) 0%,rgba(33,206,242,.05) 35%,transparent 68%);mix-blend-mode:screen;opacity:0;
  transition:opacity .4s,width .25s,height .25s,margin .25s,background .25s;will-change:transform}
.hd-cursor.is-on{opacity:1}
.hd-cursor.is-down{width:720px;height:720px;margin:-360px 0 0 -360px;background:radial-gradient(circle,rgba(150,240,255,.26) 0%,rgba(33,206,242,.12) 32%,transparent 70%)}
.hd-cursor-dot{display:none!important;position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;z-index:9999;background:#9ff0ff;
  box-shadow:0 0 10px 3px rgba(60,220,255,.75);opacity:0;transition:opacity .3s,transform .15s;mix-blend-mode:screen}
.hd-cursor-dot.is-on{opacity:.85}
.hd-burst{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;z-index:9999;border:2px solid rgba(120,235,255,.9);
  box-shadow:0 0 18px rgba(60,220,255,.8),inset 0 0 12px rgba(60,220,255,.6);animation:hd-burst .75s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes hd-burst{to{transform:scale(9);opacity:0;border-width:1px}}
/* Klick lässt die Lichter heller strahlen */
body.hd-flash .hd-lights i{animation-duration:.9s!important;filter:brightness(1.8)}
body.hd-flash .hd-sweep{animation-duration:2.2s}
body.hd-flash .hd-ref-ring,body.hd-flash .hd-ring-soft{opacity:.95!important}
body.hd-flash .hd-water-logo{filter:drop-shadow(0 0 30px rgba(60,220,255,.8)) drop-shadow(0 6px 22px rgba(0,0,0,.55))}
@media(hover:none),(pointer:coarse){.hd-cursor,.hd-cursor-dot{display:none}}
@media(prefers-reduced-motion:reduce){.hd-cursor,.hd-cursor-dot,.hd-burst{display:none}.hd-ring-soft{animation:none}}