:root{--bg1:#ff6b6b;--bg2:#6b8bff;--accent:#ffd76b}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
html {
  background:--bg1;
  background:linear-gradient(120deg,var(--bg1),var(--bg2));
  background-size:300% 300%;
  animation:gradientShift 15s ease infinite;
}
body{
    isolation: isolate;
    display:grid;place-items:center;
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;
    background: linear-gradient(120deg,var(--bg1),var(--bg2));
    overflow:hidden;color:#fff;text-align:center;
    background-size: 300% 300%;
    animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.scene{position:relative;padding:6vmin 6vmin;max-width:1200px;width:100%;z-index:3}
h1{font-size:clamp(2.8rem,8vw,6.5rem);line-height:0.9;font-weight:700;letter-spacing:0.005em;margin:0;padding:0 1rem;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,0.35);transform:translateZ(0)}
.underline{display:inline-block;margin-top:1.2rem;padding:0.35rem 1.2rem;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));backdrop-filter: blur(2px);font-size:1rem;color:rgba(255,255,255,0.92);box-shadow:0 6px 10px rgba(0,0,0,0.1)}

.motion-btn{
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font: inherit;
}

/* todo:
- dev fork with subdomain test.chemlens.com
- increase animation strength
- add parallax layer
- debug information for physics
- debug firefox
*/


/*
/* Apply transform to child-of-child (.mol) while composing with animations 
.molecules-wrap2 > .molecules > * {
    /* individual transform properties compose with element animations 
    translate: 5vmin 15vmin;
    scale: 0.5;
    /* transform-origin: top left; 
}*/

.molecules {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    filter: none;
    /* Ensure GPU compositing for smooth motion */
    will-change: transform;
    /* contain: layout paint;  <-- REMOVE: this may have been preventing later .mol from painting, andmay be re-added? */
    /* For safe optimization you can try: contain: style; */
}

.molecules-fg { z-index: 2; }
.molecules-bg { z-index: 1; }
.molecules-bg > .mol { scale:0.5; }

.mol {
    position: absolute;
    width: var(--size, 5vmax);
    height: var(--size, 5vmax);
    /* opacity: 1; handled on img level*/    
    transform-origin: center center;
    will-change: transform, rotate;
    /* Drive float animation via variables to avoid repetition */
    animation: var(--float) var(--float-dur, 18s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}

@property --defocus-blur {
  syntax: '<length>';
  inherits: false;
  initial-value: 5px;
}

.mol img {
    width:100%;
    height:100%;
    object-fit: contain;
    /* Opacity now fully driven by --molO from molOpacity animation on parent */
    opacity: var(--molO, 0);
    will-change: transform, filter, opacity;
    /* Renamed animation (opacity stripped out) */
    animation: defocus var(--defocus-dur, 12s) linear infinite;
    animation-delay: var(--defocus-delay, 0s);
    --defocus-blur:0px;
    filter: invert(1) drop-shadow(0px 0px 2px) blur(var(--defocus-blur));
}


@keyframes float1{0%{transform:translate(0,0) rotate(-5deg)}20%{transform:translate(5vw,-3vh) rotate(8deg)}40%{transform:translate(9vw,2vh) rotate(15deg)}60%{transform:translate(4vw,7vh) rotate(5deg)}80%{transform:translate(-2vw,3vh) rotate(-5deg)}100%{transform:translate(0,0) rotate(-5deg)}}
@keyframes float2{0%{transform:translate(0,0) rotate(5deg)}25%{transform:translate(-6vw,4vh) rotate(-12deg)}50%{transform:translate(8vw,8vh) rotate(20deg)}75%{transform:translate(12vw,-2vh) rotate(45deg)}100%{transform:translate(0,0) rotate(5deg)}}
@keyframes float3{0%{transform:translate(0,0) rotate(5deg)}30%{transform:translate(-8vw,-5vh) rotate(-18deg)}60%{transform:translate(3vw,-9vh) rotate(-8deg)}90%{transform:translate(7vw,-2vh) rotate(10deg)}100%{transform:translate(0,0) rotate(5deg)}}
@keyframes float4{0%{transform:translate(0,0) rotate(-5deg)}15%{transform:translate(10vw,5vh) rotate(50deg)}35%{transform:translate(6vw,12vh) rotate(18deg)}65%{transform:translate(-4vw,8vh) rotate(-10deg)}85%{transform:translate(-7vw,2vh) rotate(-30deg)}100%{transform:translate(0,0) rotate(-5deg)}}
@keyframes float5{0%{transform:translate(0,0) rotate(5deg)}40%{transform:translate(-10vw,6vh) rotate(-25deg)}70%{transform:translate(-3vw,-4vh) rotate(-5deg)}100%{transform:translate(0,0) rotate(5deg)}}
@keyframes float6{0%{transform:translate(0,0) rotate(-5deg)}20%{transform:translate(4vw,9vh) rotate(12deg)}50%{transform:translate(-8vw,11vh) rotate(-15deg)}80%{transform:translate(-12vw,3vh) rotate(-30deg)}100%{transform:translate(0,0) rotate(-5deg)}}
@keyframes float7{0%{transform:translate(0,0) rotate(-5deg)}35%{transform:translate(11vw,-6vh) rotate(22deg)}65%{transform:translate(-5vw,-10vh) rotate(-12deg)}100%{transform:translate(0,0) rotate(-5deg)}}
@keyframes float8{0%{transform:translate(0,0) rotate(5deg)}25%{transform:translate(-7vw,-8vh) rotate(-35deg)}45%{transform:translate(9vw,-4vh) rotate(15deg)}75%{transform:translate(14vw,5vh) rotate(40deg)}100%{transform:translate(0,0) rotate(5deg)}}
@keyframes defocus {
  0%  { transform:scale(1);   --defocus-blur:5px; }
  5%  { transform:scale(1);   --defocus-blur:0px; }
  35% { transform:scale(1);   --defocus-blur:0px; }
  65% { transform:scale(1.06);--defocus-blur:5px; }
  80% { transform:scale(1.12);--defocus-blur:15px; }
  85% { transform:scale(1.36);--defocus-blur:30px; }
  100%{ transform:scale(1);   --defocus-blur:5px; }
}

.mol.m1{left:6%;top:18%;--float:float1;--float-dur:19.2s;--float-delay:-0s;--defocus-dur:15s;--defocus-delay:0s}
.mol.m2{left:22%;top:60%;--float:float2;--float-dur:23.5s;--float-delay:-1.2s;--defocus-dur:12s;--defocus-delay:11s}
.mol.m3{left:54%;top:18%;--float:float3;--float-dur:17.8s;--float-delay:-0.8s;--defocus-dur:13s;--defocus-delay:8.5s}
.mol.m4{left:10%;top:40%;--float:float4;--float-dur:21.6s;--float-delay:-1.6s;--defocus-dur:12s;--defocus-delay:6.8s}
.mol.m5{left:77%;top:22%;--float:float5;--float-dur:18.9s;--float-delay:-0.4s;--defocus-dur:10s;--defocus-delay:3.5s}
.mol.m6{left:22%;top:92%;--float:float6;--float-dur:25.1s;--float-delay:-2.5s;--defocus-dur:13s;--defocus-delay:14.1s}
.mol.m7{left:46%;top:54%;--float:float7;--float-dur:16.4s;--float-delay:-1.1s;--defocus-dur:9s;--defocus-delay:5s}
.mol.m8{left:68%;top:2%;--float:float8;--float-dur:22.7s;--float-delay:-0s;--defocus-dur:14s;--defocus-delay:1s}

.mol.s1{left:60%;top:35%;--float:float5;--float-dur:19.2s;--float-delay:-0s;--defocus-dur:15s;--defocus-delay:10s}
.mol.s2{left:26%;top:34%;--float:float6;--float-dur:23.5s;--float-delay:-1.2s;--defocus-dur:12s;--defocus-delay:0.5s}
.mol.s3{left:42%;top:64%;--float:float7;--float-dur:17.8s;--float-delay:-0.8s;--defocus-dur:13s;--defocus-delay:6.8s}
.mol.s4{left:18%;top:78%;--float:float8;--float-dur:21.6s;--float-delay:-1.6s;--defocus-dur:12s;--defocus-delay:3.5s}
.mol.s5{left:74%;top:56%;--float:float1;--float-dur:18.9s;--float-delay:-0.4s;--defocus-dur:10s;--defocus-delay:15s}
.mol.s6{left:88%;top:34%;--float:float2;--float-dur:25.1s;--float-delay:-2.5s;--defocus-dur:13s;--defocus-delay:2.5s}
.mol.s7{left:32%;top:72%;--float:float3;--float-dur:16.4s;--float-delay:-1.1s;--defocus-dur:9s;--defocus-delay:1.5s}
.mol.s8{left:54%;top:70%;--float:float4;--float-dur:22.7s;--float-delay:-0s;--defocus-dur:14s;--defocus-delay:5s}

/* per-molecule defocus timings are now provided via variables above */

.blurred-center {
    position:absolute;
    inset:-20% -10% auto -10%;
    height:140%;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0) 80%);
    filter: blur(20px) saturate(120%);
    opacity:0.5;
    pointer-events:none;
    border-radius: 1.5rem;
}
/* top navigation link */
.top-link{
    position: fixed;
    top: 0.75rem;
    /*right: 0.75rem;*/
    z-index: 1000;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.9rem;
    color: #ffffffcc;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* --- Hover-Akzent & Alt-Tooltip ohne JS --- */
/* Let scene stay visually, but not block hover (re‑enable later if needed) */
.scene {
    pointer-events: none;
}

/* Re-enable interaction for underline trigger (enter debug) inside scene */
.scene .underline {
    pointer-events: auto;
    cursor: pointer;
}

/* Containers should not swallow events; only .mol elements do */
.molecules {
    pointer-events: none; /* override earlier auto */
}

.mol {
    pointer-events: auto;
    overflow: visible;
}

/* Akzent-Hintergrund */
.mol:hover::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 50%, var(--accent) 0%, rgba(255,215,107,0.0) 70%);
    filter: blur(14px);
    /* Scales with molecule opacity */
    opacity: calc(var(--molO) * 0.85);
    border-radius: 50%;
    z-index: 0;
}

/* Alt-Text (aus data-alt) */
.mol:hover::after {
    content: attr(data-alt);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0.6rem);
    background: rgba(0,0,0,0.55);
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    color: #fff;
    line-height: 1.1;
    border-radius: 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 14px -3px rgba(0,0,0,0.55);
    z-index: 2;
    pointer-events: none;
    opacity: var(--molO);
}

/* fix too small font after scaling down .molecules-bg */
.molecules-bg > .mol:hover::after{  
    padding: 0.8rem 1.4rem;
    font-size: 1.6rem;
}

/* Bild leicht hervorheben */
.mol:hover img {
  filter: invert(1);/* drop-shadow(0 0px 2px var(--accent));*/
}

/* Register custom opacity property so it interpolates smoothly */
@property --molO {
    syntax: '<number>';
    inherits: true;
    /* Start invisible until molOpacity animation (with per-molecule delay) begins */
    initial-value: 0;
}

/* Add an extra animation (molOpacity) to each .mol:
   keep existing float animation; append opacity driver */
.mol {
  /* existing float animation kept, append molOpacity */
  animation: var(--float) var(--float-dur, 18s) ease-in-out infinite,
             molOpacity var(--defocus-dur, 12s) linear infinite;
  /* provide parallel delays (second delay aligns with defocus timing) */
  animation-delay: var(--float-delay, 0s), var(--defocus-delay, 0s);
}

/* Drive the opacity timeline via a variable (no visual effect here) */
@keyframes molOpacity {
  0%   { --molO: 0; }
  5%   { --molO: 0.6; }
  35%  { --molO: 0.8; }
  65%  { --molO: 0.3; }
  80%  { --molO: 0.1; }
  85%  { --molO: 0; }
  100% { --molO: 0; }
}

/* Fallback opacity animation for browsers without @property support 
TODO: This needs to be tested! */
@keyframes molOpacityFallback {
  0%   { opacity: 0; }
  5%   { opacity: 0.6; }
  35%  { opacity: 0.8; }
  65%  { opacity: 0.3; }
  80%  { opacity: 0.1; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Apply both; var(--molO) drives primary (Chrome/Safari), fallback covers Firefox 
Is the fallback also applied when --molO is used? */
.mol img {
  animation:
    defocus var(--defocus-dur,12s) linear infinite,
    molOpacity var(--defocus-dur,12s) linear infinite,
    molOpacityFallback var(--defocus-dur,12s) linear infinite;
  animation-delay:
    var(--defocus-delay,0s),
    var(--defocus-delay,0s),
    var(--defocus-delay,0s);
}

/* Opacity is synchronized across image, hover glow, and tooltip via --molO */

/* Giant tilted structure backdrop 
body::before {
    content: "";
    position: fixed;
    inset: 50% auto auto 50%;
    width: 100vmax;
    height: 100vmax;
    transform: translate(-48%,-52%) rotate(-23deg);
    background: url("./svg/Caffeine.svg") center/contain no-repeat;
    opacity: 0.02;
    pointer-events: none;
    z-index: 0; /* stays behind page content 
    filter: invert(1) blur(5px) saturate(140%);
    /*mix-blend-mode: soft-light;*/ /* adjust or remove if unwanted 
}*/