/* AniTroves Maintenance Mode — dark, cinematic, anime-inspired theme * Performance note: .anitroves-reveal elements are VISIBLE by default. * JS adds 'anitroves-js' to , which hides below-fold elements for * their scroll animation. In-viewport elements get is-visible immediately * in the same JS tick — the hero never flickers or flashes invisible. * Search crawlers (which may not run JS) always see everything. */ :root{ --at-bg:#0b0716; --at-purple:#7c3aed; --at-pink:#ec4899; --at-cyan:#22d3ee; --at-amber:#f59e0b; --at-text:#f4f1fb; --at-muted:#b7aed0; --at-glass:rgba(255,255,255,0.06); --at-glass-border:rgba(255,255,255,0.14); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} .anitroves-body{ background:var(--at-bg); color:var(--at-text); font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif; line-height:1.65; overflow-x:hidden; position:relative; } /* ---- Background video / static fallback ---- */ .anitroves-bg{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; background-size:cover; background-position:center; filter:saturate(1.1) brightness(0.75); z-index:-3; } .anitroves-bg--static{ animation:anitroves-pan 40s ease-in-out infinite alternate; } @keyframes anitroves-pan{ 0%{transform:scale(1.05) translate(0,0);} 100%{transform:scale(1.18) translate(-2%,-2%);} } .anitroves-bg-overlay{ position:fixed; inset:0; background: radial-gradient(circle at 20% 20%, rgba(124,58,237,0.35), transparent 55%), radial-gradient(circle at 80% 30%, rgba(236,72,153,0.28), transparent 55%), linear-gradient(180deg, rgba(11,7,22,0.55) 0%, rgba(11,7,22,0.92) 55%, #0b0716 100%); z-index:-2; } .anitroves-particles{ position:fixed; inset:0; z-index:-1; pointer-events:none; } .anitroves-progress{ position:fixed; top:0;left:0; height:3px;width:0%; background:linear-gradient(90deg,var(--at-pink),var(--at-purple),var(--at-cyan)); z-index:50; transition:width .1s ease-out; } /* ---- Navigation ---- */ .anitroves-nav{ position:fixed; top:0;left:0;right:0; z-index:40; padding:16px 6%; backdrop-filter:blur(10px); background:linear-gradient(180deg, rgba(11,7,22,0.75), transparent); } .anitroves-nav-inner{ display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; } /* Logo: image + text side by side */ .anitroves-logo-wrap{ display:flex; align-items:center; gap:10px; text-decoration:none; } /* * Logo filter: * The uploaded logo is black letterform on white background. * invert(1) turns: black → white (letterform shows), white → black (bg disappears). * mix-blend-mode: screen makes dark (black) areas transparent-like on dark bg, * so only the white letterform is visible — the white background vanishes. */ .anitroves-logo-img{ height:36px; width:auto; display:block; filter:invert(1); mix-blend-mode:screen; } .anitroves-logo-text{ font-size:1.35rem; font-weight:700; letter-spacing:.03em; background:linear-gradient(90deg,var(--at-pink),var(--at-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; } .anitroves-nav-tag{ font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--at-muted); border:1px solid var(--at-glass-border); padding:6px 14px; border-radius:999px; background:var(--at-glass); } /* ---- Main content ---- */ main{position:relative;z-index:1;} /* ---- Hero ---- */ .anitroves-hero{ min-height:100vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 6%; max-width:900px; } .anitroves-eyebrow{ color:var(--at-cyan); letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; font-weight:600; margin-bottom:18px; } .anitroves-hero-title{ font-size:clamp(2.4rem,6vw,4.6rem); font-weight:800; line-height:1.08; margin:0 0 22px; background:linear-gradient(100deg,#fff 10%,var(--at-pink) 55%,var(--at-cyan) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; } .anitroves-hero-highlight{ font-size:clamp(1.1rem,2.4vw,1.5rem); font-weight:600; margin:0 0 22px; background:linear-gradient(90deg,var(--at-cyan),var(--at-pink)); -webkit-background-clip:text; background-clip:text; color:transparent; } .anitroves-hero-sub{ font-size:1.15rem; color:var(--at-muted); max-width:640px; margin:0 0 30px; } .anitroves-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:46px; } .anitroves-pill{ padding:9px 18px; border-radius:999px; background:var(--at-glass); border:1px solid var(--at-glass-border); font-size:.85rem; color:var(--at-text); backdrop-filter:blur(6px); } .anitroves-scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--at-muted); font-size:.8rem; } .anitroves-scroll-cue span{ width:24px;height:40px; border:2px solid var(--at-glass-border); border-radius:14px; position:relative; } .anitroves-scroll-cue span::before{ content:''; position:absolute; top:6px;left:50%; width:4px;height:8px; margin-left:-2px; background:var(--at-cyan); border-radius:2px; animation:anitroves-scroll-dot 1.8s infinite; } @keyframes anitroves-scroll-dot{ 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(14px);} } /* ---- Project sections ---- */ .anitroves-section{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1200px; margin:0 auto; padding:110px 6%; } .anitroves-section--reverse{direction:rtl;} .anitroves-section--reverse > *{direction:ltr;} .anitroves-section-media{ display:flex; justify-content:center; } /* ---- Glow cards with images ---- */ .anitroves-glow-card{ width:100%; max-width:360px; aspect-ratio:1/1; border-radius:28px; background:var(--at-glass); border:1px solid var(--at-glass-border); backdrop-filter:blur(14px); display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:0; position:relative; overflow:hidden; } .anitroves-glow-card::after{ content:''; position:absolute; width:220px;height:220px; border-radius:50%; filter:blur(60px); opacity:.45; top:-40px;right:-40px; pointer-events:none; z-index:1; } .anitroves-glow-card--pink::after{background:var(--at-pink);} .anitroves-glow-card--cyan::after{background:var(--at-cyan);} .anitroves-glow-card--purple::after{background:var(--at-purple);} .anitroves-glow-card--amber::after{background:var(--at-amber);} .anitroves-card-img{ position:absolute; inset:0; width:100%;height:100%; object-fit:cover; z-index:0; border-radius:28px; transition:transform .6s cubic-bezier(.22,.68,0,1.01); } .anitroves-glow-card:hover .anitroves-card-img{transform:scale(1.04);} /* Dark gradient overlay so text is legible over the card image */ .anitroves-glow-card::before{ content:''; position:absolute; inset:0; background:linear-gradient( to top, rgba(11,7,22,0.95) 0%, rgba(11,7,22,0.6) 42%, rgba(11,7,22,0.15) 70%, transparent 100% ); z-index:1; border-radius:28px; } .anitroves-card-meta{ position:relative; z-index:2; padding:24px 28px; display:flex; flex-direction:column; gap:6px; width:100%; } .anitroves-card-eyebrow{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--at-muted); } .anitroves-card-title{ font-size:1.6rem; font-weight:800; color:var(--at-text); line-height:1.1; } .anitroves-glow-card--pink .anitroves-card-title{text-shadow:0 0 20px rgba(236,72,153,0.7);} .anitroves-glow-card--cyan .anitroves-card-title{text-shadow:0 0 20px rgba(34,211,238,0.7);} .anitroves-glow-card--purple .anitroves-card-title{text-shadow:0 0 20px rgba(124,58,237,0.7);} .anitroves-glow-card--amber .anitroves-card-title{text-shadow:0 0 20px rgba(245,158,11,0.7);} /* ---- Section copy ---- */ .anitroves-section-copy h2{ font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.25; margin:0 0 18px; color:var(--at-text); } .anitroves-section-copy p{ color:var(--at-muted); font-size:1.05rem; max-width:560px; } /* ---- Closing ---- */ .anitroves-closing{ text-align:center; max-width:760px; margin:0 auto; padding:100px 6% 160px; } .anitroves-closing h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:18px; background:linear-gradient(90deg,var(--at-cyan),var(--at-pink)); -webkit-background-clip:text; background-clip:text; color:transparent; } .anitroves-closing p{color:var(--at-muted);font-size:1.05rem;} /* ---- Footer ---- */ .anitroves-footer{ text-align:center; padding:34px 6% 46px; color:var(--at-muted); font-size:.85rem; position:relative; z-index:1; border-top:1px solid var(--at-glass-border); } .anitroves-footer-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; } .anitroves-footer-logo{ height:28px; width:auto; filter:invert(1); mix-blend-mode:screen; opacity:.6; } /* ==================================================================== * SCROLL REVEAL * * Default state: FULLY VISIBLE. All text and images are readable on * first paint and for search crawlers without any JavaScript. * * When reveal.js loads it adds 'anitroves-js' to . That enables * the animation-ready state below. Elements already in the viewport * get 'is-visible' in the same JS tick — no flash, no delay. * ==================================================================== */ .anitroves-reveal{ /* Transitions apply in all states — but the element starts visible. */ transition: opacity .9s cubic-bezier(.22,.68,0,1.01), transform .9s cubic-bezier(.22,.68,0,1.01), filter .9s ease; will-change:opacity,transform,filter; } /* ---- Hidden initial state (only when JS has loaded) ---- */ .anitroves-js .anitroves-reveal:not(.is-visible){ opacity:0; filter:blur(5px); } .anitroves-js .anitroves-reveal[data-reveal="left"]:not(.is-visible){ transform:translateX(-60px) scale(.97); } .anitroves-js .anitroves-reveal[data-reveal="right"]:not(.is-visible){ transform:translateX(60px) scale(.97); } .anitroves-js .anitroves-reveal[data-reveal="up"]:not(.is-visible){ transform:translateY(50px) scale(.97); } /* ---- Revealed state ---- */ .anitroves-reveal.is-visible{ opacity:1 !important; transform:none !important; filter:none !important; } /* ---- Responsive ---- */ @media (max-width:860px){ .anitroves-section, .anitroves-section--reverse{ grid-template-columns:1fr; direction:ltr; text-align:left; padding:80px 7%; gap:34px; } .anitroves-glow-card{max-width:100%;} .anitroves-logo-img{height:28px;} .anitroves-logo-text{font-size:1.1rem;} }