/* ============================================================ CORNER COTTAGE — Enhancement Library (CSS) · Webworth All effects are opt-in per page via . Performance-first: transform/opacity only, GPU-composited, honours prefers-reduced-motion. ============================================================ */ /* ---------- reduced motion: disable all heavy motion ---------- */ @media (prefers-reduced-motion: reduce){ .cc-reveal,[data-cc-count],.cc-tilt,.cc-float, .cc-parallax,.cc-magnet,.cc-draw path{ transition:none!important;animation:none!important; transform:none!important;opacity:1!important; } } /* ---------- 1. scroll progress bar ---------- */ .cc-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999; background:var(--cc-accent,#4CC2A8);transition:width .08s linear;will-change:width} .cc-progress.thick{height:5px} /* ---------- 2. scroll reveal variants ---------- */ /* Safety: only hide reveal elements once the library confirms JS is live (html.cc-js). Without JS, or before boot, content stays fully visible so nothing can get stuck invisible. */ .cc-reveal{will-change:transform,opacity; transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} html.cc-js .cc-reveal{opacity:0} .cc-reveal.up{transform:translateY(38px)} .cc-reveal.down{transform:translateY(-38px)} .cc-reveal.left{transform:translateX(-46px)} .cc-reveal.right{transform:translateX(46px)} .cc-reveal.zoom{transform:scale(.9)} .cc-reveal.drop{transform:translateY(-60px);opacity:0} .cc-reveal.in{opacity:1;transform:none} /* stagger children */ .cc-stagger > *{transform:translateY(30px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} html.cc-js .cc-stagger > *{opacity:0} .cc-stagger.in > *{opacity:1;transform:none} /* ---------- 3. hover micro-interactions ---------- */ .cc-lift{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease} .cc-lift:hover{transform:translateY(-6px)} .cc-pop{transition:transform .25s cubic-bezier(.34,1.56,.64,1)} .cc-pop:hover{transform:scale(1.04)} .cc-zoomimg{overflow:hidden} .cc-zoomimg img{transition:transform .6s cubic-bezier(.22,.61,.36,1)} .cc-zoomimg:hover img{transform:scale(1.08)} /* ---------- 4. animated button shine ---------- */ .cc-shine{position:relative;overflow:hidden} .cc-shine::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .6s ease;pointer-events:none} .cc-shine:hover::after{left:130%} /* ---------- 5. tilt (3d) ---------- */ .cc-tilt{transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform} /* ---------- 6. floating elements ---------- */ @keyframes cc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .cc-float{animation:cc-bob 6s ease-in-out infinite;will-change:transform} .cc-float.slow{animation-duration:9s} .cc-float.delay{animation-delay:-3s} /* ---------- 7. animated gradient surface ---------- */ @keyframes cc-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .cc-animgrad{background-size:300% 300%!important;animation:cc-grad 14s ease infinite} /* ---------- 8. particle / canvas backdrop ---------- */ .cc-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .cc-particles + *{position:relative;z-index:1} /* ---------- 9. SVG line draw ---------- */ .cc-draw path{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000); transition:stroke-dashoffset 2s ease} .cc-draw.in path{stroke-dashoffset:0} /* ---------- 10. before / after slider ---------- */ .cc-ba{position:relative;overflow:hidden;border-radius:inherit;cursor:ew-resize; user-select:none;touch-action:none} .cc-ba img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none} .cc-ba .cc-ba-after{position:absolute;inset:0;width:100%;height:100%;overflow:hidden} .cc-ba .cc-ba-after img{position:absolute;inset:0;height:100%} .cc-ba .cc-ba-handle{position:absolute;top:0;bottom:0;width:3px;background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);left:50%;z-index:3} .cc-ba .cc-ba-handle::after{content:'⟺';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff; color:#333;display:flex;align-items:center;justify-content:center;font-size:14px; box-shadow:0 3px 12px rgba(0,0,0,.3)} .cc-ba .cc-ba-tag{position:absolute;bottom:10px;font-size:10px;letter-spacing:.12em; text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;padding:3px 9px;border-radius:20px;z-index:2} .cc-ba .cc-ba-tag.b{left:10px}.cc-ba .cc-ba-tag.a{right:10px} /* ---------- 11. accordion (FAQ) ---------- */ .cc-acc-item{border-bottom:1px solid rgba(128,128,128,.22)} .cc-acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer; font:inherit;color:inherit;padding:1.1rem 2.2rem 1.1rem 0;position:relative; display:flex;justify-content:space-between;align-items:center;gap:1rem} .cc-acc-q .cc-acc-ic{flex-shrink:0;transition:transform .3s ease;font-size:1.2rem;line-height:1} .cc-acc-item.open .cc-acc-ic{transform:rotate(45deg)} .cc-acc-a{max-height:0;overflow:hidden;transition:max-height .4s ease;opacity:.85} .cc-acc-a > div{padding:0 0 1.1rem} /* ---------- 12. tabs ---------- */ .cc-tabs-nav{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem} .cc-tab-btn{font:inherit;cursor:pointer;border:1px solid rgba(128,128,128,.3); background:transparent;color:inherit;padding:.5rem 1.1rem;border-radius:24px; font-size:.78rem;font-weight:600;transition:background .2s,color .2s,border-color .2s} .cc-tab-btn.active{background:var(--cc-accent,#333);color:#fff;border-color:transparent} .cc-tab-panel{display:none;animation:cc-fadein .4s ease} .cc-tab-panel.active{display:block} @keyframes cc-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- 13. flip cards ---------- */ .cc-flip{perspective:1100px} .cc-flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.22,.61,.36,1); transform-style:preserve-3d} .cc-flip:hover .cc-flip-inner{transform:rotateY(180deg)} .cc-flip-front,.cc-flip-back{position:absolute;inset:0;backface-visibility:hidden; -webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden} .cc-flip-back{transform:rotateY(180deg)} /* ---------- 14. counter (no layout shift) ---------- */ [data-cc-count]{font-variant-numeric:tabular-nums} /* ---------- 15. magnetic / mouse-follow glow ---------- */ .cc-spotlight{position:relative;overflow:hidden} .cc-spotlight::before{content:'';position:absolute;width:380px;height:380px;border-radius:50%; left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%); background:radial-gradient(circle,var(--cc-glow,rgba(255,255,255,.14)),transparent 65%); opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0} .cc-spotlight:hover::before{opacity:1} /* ---------- 16. back-to-top button ---------- */ .cc-top{position:fixed;right:18px;bottom:84px;width:44px;height:44px;border-radius:50%; border:none;cursor:pointer;background:var(--cc-accent,#333);color:#fff;font-size:1.1rem; opacity:0;transform:translateY(14px);pointer-events:none;z-index:9998; transition:opacity .3s,transform .3s;box-shadow:0 6px 18px rgba(0,0,0,.25)} .cc-top.show{opacity:1;transform:none;pointer-events:auto} /* ---------- 17. ken-burns slow pan for hero slides ---------- */ @keyframes cc-ken{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.16) translate(-1.5%,-1.5%)}} .cc-kenburns [data-slide].active{animation:cc-ken 12s ease-out forwards} /* ---------- 18. marquee logo / text strip ---------- */ .cc-marquee{overflow:hidden;white-space:nowrap} .cc-marquee-track{display:inline-flex;gap:2.6rem;animation:cc-scroll 26s linear infinite;will-change:transform} .cc-marquee:hover .cc-marquee-track{animation-play-state:paused} @keyframes cc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- 19. ripple on click ---------- */ .cc-ripple{position:relative;overflow:hidden} .cc-ripple-dot{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none; background:rgba(255,255,255,.5);animation:cc-rip .6s ease-out} @keyframes cc-rip{to{transform:scale(2.6);opacity:0}}