.studioPorthole{aspect-ratio:1;pointer-events:none;width:100%;position:relative}.studioPorthole:before{content:"";border-radius:50%;position:absolute;inset:4%;box-shadow:0 15px 22px #00050c47}.studioPortholeIllustration{width:100%;height:auto;display:block;position:relative;overflow:visible}.studioPortholeRim{stroke:#37556b;stroke-width:1px}.studioPortholeOuterGroove{stroke:#06121e;stroke-width:2px}.studioPortholeMachinedLine{stroke:#aacbdd;stroke-opacity:.15;stroke-width:.6px}.studioPortholeInnerGroove{stroke:#091521;stroke-width:1px}.studioPortholeGasket{stroke:#020a12;stroke-width:10px}.studioPortholeWindowSeal{stroke:#163e57;stroke-width:3px}.studioPortholeWindowLight{stroke:var(--cyan);stroke-opacity:.4;stroke-width:.85px}.studioPortholeRimHighlight{stroke:#8cc4e4;stroke-opacity:.32;stroke-width:.8px;stroke-linecap:round}.studioPortholeBoltSocket{fill:#050e17;stroke:#2c485b;stroke-width:.7px}.studioPortholeBolt{stroke:#547286;stroke-width:.6px}.studioPortholeBoltSlot{stroke:#081824;stroke-width:1.4px;stroke-linecap:round}.studioPortholeHinge,.studioPortholeLatch{stroke:#446780;stroke-width:.7px}.studioPortholeHinge>path:last-child{stroke:#0a2031;stroke-width:1.4px}.studioPortholeClouds{fill:#071726;opacity:.7;animation:22s ease-in-out infinite alternate studioPortholeCloudDrift}.studioPortholeClouds path+path{opacity:.45;fill:#132b3d}.studioPortholeHorizonMist{fill:#a8d5e7;opacity:.075}.studioPortholeSea{animation:6.8s ease-in-out infinite studioPortholeSwell}.studioPortholeWaveTrack{animation:23s linear infinite studioPortholeWaveTravel}.studioPortholeFoam{stroke:#b5e8fa;stroke-opacity:.48;stroke-width:1px;stroke-linecap:round}.studioPortholeWaterDetails{stroke:#4c9cc3;stroke-opacity:.27;stroke-width:.8px;stroke-linecap:round}.studioPortholeSea--horizon{animation-delay:-3.5s}.studioPortholeSea--horizon .studioPortholeWaveTrack{animation-duration:32s}.studioPortholeSea--horizon .studioPortholeFoam{stroke-opacity:.22;stroke-width:.7px}.studioPortholeSea--swell{animation-delay:-1.7s}.studioPortholeSea--swell .studioPortholeWaveTrack{animation-duration:21s;animation-delay:-8s}.studioPortholeSea--foreground{animation-delay:-4.3s}.studioPortholeSea--foreground .studioPortholeWaveTrack{animation-duration:16s;animation-delay:-5s}.studioPortholeSea--foreground .studioPortholeFoam{stroke-opacity:.62;stroke-width:1.2px}.studioPortholeShipHeave{animation:6.8s ease-in-out infinite studioPortholeShipHeave}.studioPortholeShip{transform-box:view-box;transform-origin:50% 65%;animation:6.8s ease-in-out infinite studioPortholeShipRoll}.studioPortholeMasts{stroke:#172b38;stroke-width:3.2px;stroke-linecap:round}.studioPortholeRigging{stroke:#83acbf;stroke-opacity:.6;stroke-width:.65px}.studioPortholeSail{stroke:#52758b;stroke-opacity:.55;stroke-width:.75px;stroke-linejoin:round}.studioPortholeSailSeams{stroke:#5d8197;stroke-opacity:.24;stroke-width:.65px}.studioPortholeYards{stroke:#203746;stroke-width:2.2px;stroke-linecap:round}.studioPortholeFlag{fill:#03080d;stroke:#456174;stroke-width:.7px}.studioPortholeFlagSkull{fill:#d2e4eb}.studioPortholeFlagSkull path+path{fill:none;stroke:#d2e4eb;stroke-width:.85px}.studioPortholeFlagSkull .studioPortholeFlagEyes{stroke:#03080d;stroke-width:1.1px}.studioPortholeHull{stroke:#51788f;stroke-width:.75px;stroke-linejoin:round}.studioPortholeHullLines{stroke:#527184;stroke-opacity:.56;stroke-width:.8px}.studioPortholeRailings{stroke:#7195aa;stroke-opacity:.64;stroke-width:.8px}.studioPortholeShipPort{fill:#a3cede;opacity:.6}.studioPortholeRainStroke{stroke:#d4effa;stroke-width:1px;stroke-linecap:round}.studioPortholeRain{animation:1.6s linear infinite studioPortholeRainFall}.studioPortholeRain--far{opacity:.17;animation-duration:2.4s}.studioPortholeRain--near{opacity:.33;animation-delay:-.8s}.studioPortholeGlassReflection{stroke:#d9f3ff;stroke-opacity:.13;stroke-width:1.2px;stroke-linecap:round}.studioPortholeGlassDroplet{stroke:#c5eaff;stroke-width:.75px;stroke-opacity:.25;stroke-linecap:round;animation:8s ease-in-out infinite studioPortholeGlassGlisten}@keyframes studioPortholeCloudDrift{0%{transform:translate(-7px)}to{transform:translate(7px)}}@keyframes studioPortholeWaveTravel{0%{transform:translate(0)}to{transform:translate(-480px)}}@keyframes studioPortholeSwell{0%,to{transform:translateY(2px)}50%{transform:translateY(-3px)}}@keyframes studioPortholeShipHeave{0%,to{transform:translateY(-3px)}50%{transform:translateY(4px)}}@keyframes studioPortholeShipRoll{0%,to{transform:rotate(-2.7deg)}50%{transform:rotate(2.5deg)}}@keyframes studioPortholeRainFall{0%{transform:translate(0)}to{transform:translate(-48px,96px)}}@keyframes studioPortholeGlassGlisten{0%,to{opacity:.4}50%{opacity:1}}.studioPorthole[data-animation-active=false] .studioPortholeClouds,.studioPorthole[data-animation-active=false] .studioPortholeShip,.studioPorthole[data-animation-active=false] .studioPortholeRain,.studioPorthole[data-animation-active=false] .studioPortholeSea,.studioPorthole[data-animation-active=false] .studioPortholeShipHeave,.studioPorthole[data-animation-active=false] .studioPortholeWaveTrack,.studioPorthole[data-animation-active=false] .studioPortholeGlassDroplet{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.studioPortholeClouds,.studioPortholeShip,.studioPortholeRain,.studioPortholeSea,.studioPortholeShipHeave,.studioPortholeWaveTrack,.studioPortholeGlassDroplet{animation:none}}