/* =========================================================== cigil.fish — shared ocean engine styles Used by every page. Pair with assets/fish.js =========================================================== */ :root{ --abyss:#021b2b; --deep:#04263b; --mid:#0a4f6e; --shallow:#0fa3b1; --foam:#b8f3ec; --sun:#ffe7a3; --coral:#ff7a6b; --ink:#eaf7fb; --ink-soft:rgba(234,247,251,.72); --glass:rgba(255,255,255,.07); --glass-brd:rgba(184,243,236,.22); --serif:'Fraunces',Georgia,serif; --sans:'Outfit',system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--sans); color:var(--ink); background:var(--abyss); overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased; } /* hide native cursor on capable devices (toggled by JS adding .fishcursor to ) */ .fishcursor, .fishcursor a, .fishcursor button, .fishcursor .swimmer{cursor:none} /* ====== layered ocean background ====== */ .ocean{ position:fixed;inset:0;z-index:-3; background: radial-gradient(120% 80% at 50% -10%, #1bd0d6 0%, transparent 45%), linear-gradient(180deg, #0bb8c4 0%, #0a8fb0 14%, #086a92 32%, #06496e 52%, #043551 72%, #021b2b 100%); } /* sun rays */ .rays{ position:fixed;inset:-20% 0 auto 0;height:90vh;z-index:-2; background: conic-gradient(from 180deg at 48% 0, transparent 0deg, rgba(255,231,163,.10) 4deg, transparent 8deg, transparent 14deg, rgba(255,231,163,.07) 18deg, transparent 22deg, transparent 30deg, rgba(255,231,163,.12) 35deg, transparent 40deg, transparent 50deg, rgba(255,231,163,.06) 55deg, transparent 60deg); mix-blend-mode:screen; filter:blur(6px); animation:sway 14s ease-in-out infinite alternate; transform-origin:50% 0; pointer-events:none; } @keyframes sway{from{transform:skewX(-6deg) scaleX(1.05)}to{transform:skewX(6deg) scaleX(.95)}} /* caustic shimmer dots */ .caustics{ position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5; background-image:radial-gradient(circle, rgba(184,243,236,.5) 1px, transparent 1.4px); background-size:46px 46px; mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 60%); -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 60%); animation:caust 20s linear infinite; } @keyframes caust{to{background-position:300px 600px}} /* rising bubbles container */ .bubbles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .bubble{ position:absolute;bottom:-40px;border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(184,243,236,.15) 60%, transparent); box-shadow:inset 0 0 6px rgba(255,255,255,.4); animation:rise linear infinite; } @keyframes rise{ 0%{transform:translateY(0) translateX(0) scale(.7);opacity:0} 10%{opacity:.7} 90%{opacity:.5} 100%{transform:translateY(-110vh) translateX(40px) scale(1);opacity:0} } /* swimming background fish */ .school{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden} .swimmer{position:absolute;will-change:transform;opacity:.0;animation:swimAcross linear infinite;pointer-events:auto} .swimmer:hover{filter:drop-shadow(0 0 8px rgba(255,231,163,.9))} /* moves left -> right, so flip the left-facing art to face right */ @keyframes swimAcross{ 0%{transform:translateX(-12vw) scaleX(-1) translateY(0)} 50%{transform:translateX(56vw) scaleX(-1) translateY(-22px)} 100%{transform:translateX(120vw) scaleX(-1) translateY(0)} } .swimmer.flip{animation-name:swimAcrossR} /* moves right -> left, art already faces left so no mirror */ @keyframes swimAcrossR{ 0%{transform:translateX(112vw) translateY(0)} 50%{transform:translateX(48vw) translateY(20px)} 100%{transform:translateX(-20vw) translateY(0)} } /* a lone shark fly-through (easter egg) */ .shark{position:fixed;top:40vh;left:0;z-index:6;font-size:5rem;pointer-events:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));will-change:transform} /* eaten-fish score badge */ .score{ position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:120; font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.04em; color:var(--ink);background:rgba(2,27,43,.55);backdrop-filter:blur(8px); border:1px solid var(--glass-brd);border-radius:999px;padding:8px 16px; opacity:0;transition:opacity .4s, transform .2s;pointer-events:none; } .score.show{opacity:1} .score b{color:var(--sun)} /* "nom!" popup when a fish is eaten */ .nom{ position:fixed;z-index:9997;pointer-events:none;font-family:var(--serif); font-weight:900;font-size:1.4rem;color:var(--sun); text-shadow:0 2px 6px rgba(0,0,0,.4);transform:translate(-50%,-50%); } /* mute toggle */ .sound-toggle{ position:fixed;right:16px;bottom:16px;z-index:120; width:42px;height:42px;border-radius:50%;cursor:pointer; border:1px solid var(--glass-brd);background:rgba(2,27,43,.55); backdrop-filter:blur(8px);color:var(--ink);font-size:1.1rem; display:flex;align-items:center;justify-content:center;transition:transform .15s, background .2s; } .fishcursor .sound-toggle{cursor:none} .sound-toggle:hover{transform:translateY(-2px);background:rgba(2,27,43,.8)} /* milestone / easter-egg toast */ .milestone{ position:fixed;left:50%;top:34%;z-index:9996;pointer-events:none; transform:translate(-50%,-50%);text-align:center; font-family:var(--serif);font-weight:900; font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.1; color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.5); background:linear-gradient(120deg,#fff,var(--foam),var(--sun)); -webkit-background-clip:text;background-clip:text; } .milestone .sub{display:block;font-family:var(--sans);font-weight:600;font-size:1rem;-webkit-text-fill-color:var(--ink-soft);color:var(--ink-soft);margin-top:6px} /* ====== fish cursor ====== */ #fishCursor{ position:fixed;top:0;left:0;width:42px;height:42px;z-index:9999; pointer-events:none;transform:translate(-50%,-50%); transition:opacity .25s;will-change:transform; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); } #fishCursor .body{transform-origin:center;animation:wiggle 1.2s ease-in-out infinite} @keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} /* click splash ripples */ .splash{ position:fixed;z-index:9998;pointer-events:none;border-radius:50%; border:2px solid rgba(184,243,236,.8); transform:translate(-50%,-50%); animation:splashOut .7s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes splashOut{ 0%{width:6px;height:6px;opacity:.9} 100%{width:120px;height:120px;opacity:0} } .droplet{ position:fixed;z-index:9998;pointer-events:none;width:8px;height:8px;border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, var(--shallow)); transform:translate(-50%,-50%); } /* ====== shared layout ====== */ .wrap{max-width:1120px;margin:0 auto;padding:0 24px} nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:18px 28px; backdrop-filter:blur(10px); background:linear-gradient(180deg, rgba(2,27,43,.5), transparent); transition:background .3s; } nav.scrolled{background:rgba(2,27,43,.78);backdrop-filter:blur(14px);box-shadow:0 6px 30px rgba(0,0,0,.25)} .brand{font-family:var(--serif);font-weight:900;font-size:1.4rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink)} .brand .dot{color:var(--sun)} .navlinks{display:flex;gap:28px;align-items:center} .navlinks a{color:var(--ink-soft);text-decoration:none;font-weight:500;font-size:.95rem;position:relative;transition:color .2s} .navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--foam);transition:width .25s} .navlinks a:hover{color:var(--ink)} .navlinks a:hover::after{width:100%} .navlinks a.active{color:var(--ink)} .navlinks a.active::after{width:100%} .navlinks .cta{padding:9px 18px;border-radius:999px;background:linear-gradient(120deg,var(--shallow),#1bd0d6);color:#022;font-weight:700;} .navlinks .cta::after{display:none} .navlinks .cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,208,214,.4)} @media(max-width:680px){.navlinks a:not(.cta){display:none}} /* buttons */ .btns{display:flex;gap:16px;flex-wrap:wrap} .btn{ padding:15px 30px;border-radius:999px;font-weight:700;font-size:1rem; text-decoration:none;display:inline-flex;align-items:center;gap:10px; transition:transform .2s, box-shadow .2s, background .2s;border:none;cursor:pointer; } .fishcursor .btn{cursor:none} .btn-primary{background:linear-gradient(120deg,var(--shallow),#1bd0d6);color:#022} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(27,208,214,.45)} .btn-ghost{background:var(--glass);border:1px solid var(--glass-brd);color:var(--ink)} .btn-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)} /* sections + headings */ section{position:relative;padding:110px 0} .section-head{text-align:center;max-width:640px;margin:0 auto 64px} .section-head .kick{color:var(--foam);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem} .section-head h2{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.02em;margin:12px 0 14px} .section-head p{color:var(--ink-soft);font-size:1.1rem} /* subpage hero (sits below fixed nav) */ .pagehero{padding:160px 0 40px;text-align:center} .pagehero .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.8rem;letter-spacing:.18em;text-transform:uppercase; color:var(--foam);font-weight:600; padding:7px 14px;border:1px solid var(--glass-brd);border-radius:999px; background:var(--glass);margin-bottom:22px; } .pagehero h1{ font-family:var(--serif);font-weight:900; font-size:clamp(2.6rem,8vw,5rem);line-height:1;letter-spacing:-.03em;margin-bottom:18px; } .pagehero h1 .grad{ background:linear-gradient(120deg,#fff 0%,var(--foam) 40%,var(--sun) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .pagehero p.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--ink-soft);max-width:620px;margin:0 auto} /* cards / grids */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px} .card{ background:var(--glass);border:1px solid var(--glass-brd);border-radius:22px; padding:32px;backdrop-filter:blur(8px); transition:transform .3s, box-shadow .3s, border-color .3s; position:relative;overflow:hidden; } .card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(27,208,214,.16), transparent 60%);opacity:0;transition:opacity .3s} .card:hover{transform:translateY(-8px);border-color:rgba(184,243,236,.5);box-shadow:0 20px 50px rgba(0,0,0,.3)} .card:hover::before{opacity:1} .card .ico{font-size:2.4rem;margin-bottom:16px;display:inline-block;animation:floaty 4s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-6deg)}} .card h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:10px} .card p{color:var(--ink-soft);font-size:.98rem} /* footer */ footer{padding:50px 0 70px;text-align:center;border-top:1px solid var(--glass-brd);color:var(--ink-soft)} footer .brand{justify-content:center;margin-bottom:14px;font-size:1.5rem} footer .small{font-size:.85rem;opacity:.7;margin-top:18px} footer a{color:var(--foam);text-decoration:none} /* nearly-invisible hidden link (easter egg) */ .secret{opacity:.18;text-decoration:none;color:inherit;transition:opacity .3s} .secret:hover{opacity:1} /* ====== dangling fishing-line "back home" link ====== */ .hookline{ display:inline-flex;flex-direction:column;align-items:center; text-decoration:none;color:var(--ink); transform-origin:top center;animation:dangle 5.5s ease-in-out infinite; } .fishcursor .hookline{cursor:none} .hookline .line{ width:2px;height:140px; background:linear-gradient(180deg, rgba(207,238,245,0) 0%, rgba(207,238,245,.85) 100%); } .hookline .hookwrap{position:relative;display:inline-block;line-height:0} .hookline .hook{width:48px;height:99px;display:block;margin-top:-1px;filter:drop-shadow(0 0 6px rgba(127,233,255,.35));transition:transform .25s ease, filter .25s ease} /* the worm — hangs off the hook's bend and wriggles */ .hookline .bait{ position:absolute;left:11px;top:56px;font-size:1.15rem;line-height:1; transform-origin:50% 0;animation:baitwiggle 1.1s ease-in-out infinite; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); } @keyframes baitwiggle{ 0%{transform:rotate(-22deg) scaleY(.96)} 50%{transform:rotate(22deg) scaleY(1.04)} 100%{transform:rotate(-22deg) scaleY(.96)} } .hookline .hook-label{ margin-top:14px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-soft);opacity:.7;transition:opacity .25s ease, color .25s ease; } .hookline:hover .hook{transform:scale(1.12) rotate(-5deg);filter:drop-shadow(0 0 13px rgba(127,233,255,.85))} .hookline:hover .hook-label{opacity:1;color:var(--foam)} @keyframes dangle{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto} .reveal{opacity:1;transform:none} }