/* The original house and animal silhouettes are the entrance to the site. */
:root{--violet:#6236c9;--lilac:#ebe0ff;--sun:#ffc457}
.editorial-hero{background:linear-gradient(180deg,#fff0d8 0%,#fffaf2 90%);max-width:none}
.hero-heading h1 .line:nth-child(2){color:var(--violet)}
.hero-heading .ink-word{color:inherit}
.button.primary{background:var(--violet);color:white}
.button.primary:hover{background:#4d22ad}
.nav-cta span{background:var(--violet);color:white}
.hero-landscape{border-radius:3px 160px 3px 3px}
.round-note{background:var(--sun);box-shadow:0 0 0 7px #ffc45730}
.round-note:hover{background:#ffae30;transform:rotate(8deg)}
.hero-experience{display:flex;justify-content:flex-end;margin-top:25px}
.hero-replay{display:flex;align-items:center;gap:12px;color:var(--violet);font-size:12px;font-weight:600;background:none;border:0;padding:8px 0}
.hero-replay>span:last-child{font-weight:400;font-size:10px;color:var(--muted);margin-left:10px}
.play-house{display:grid;place-items:center;width:35px;height:35px;border:1px solid #bea1eb;border-radius:50%;font-size:24px;line-height:1;transition:background .2s,transform .4s}
.hero-replay:hover .play-house{background:var(--lilac);transform:rotate(-12deg)}
.manifesto .section-index>span:last-child{color:var(--violet)}
.highlight-line:after{background:var(--sun)}
.cat-world{background:var(--violet)}
.world-heading em{color:var(--sun)}
.space-tabs button[aria-selected=true],.space-tabs button[aria-selected=true]>span:last-child{color:var(--sun);border-bottom-color:var(--sun)}
.cat-world .button.gold{background:var(--sun);color:#30223d}
.dog-story{background:#ffdfb7}
.cause-photo>span{background:var(--sun)}
.closing{background:#472487}
.closing em{color:var(--sun)}
.booking-form{background:#fff0da}
.gallery-filters [aria-pressed=true]{background:var(--violet);color:#fff}

/* Camera, doors and lettering have independent timelines. No video download. */
.brand-intro{display:none}
.intro-active{overflow:hidden}
.intro-active .brand-intro{position:fixed;inset:0;z-index:120;display:grid;place-items:center;overflow:hidden;background:transparent;isolation:isolate;animation:portal-depart .65s 3.7s both;pointer-events:auto;color:var(--ink)}
.portal-wash{position:absolute;width:76vmax;height:76vmax;border-radius:50%;background:radial-gradient(circle,#ffd98d75,transparent 67%);left:50%;top:44%;transform:translate(-50%,-50%);animation:wash-arrive 1.3s both,outline-leave .3s 2s forwards}
.portal-orbit{position:absolute;width:70vw;height:70vw;min-width:600px;min-height:600px;border:1px solid #d8b0a238;border-radius:50%;pointer-events:none}
.orbit-one{transform:rotate(-30deg) scaleY(.56);animation:orbit-drift 4.3s ease-out both}
.orbit-two{transform:rotate(33deg) scaleY(.5);border-color:#c3a0e036;animation:orbit-drift-two 4.3s ease-out both}
.portal-topline{z-index:2;position:absolute;left:4.5vw;right:4.5vw;top:32px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;color:#8e6b40;animation:portal-labels .5s 2.25s both}
.portal-camera{position:relative;width:min(68vw,470px,65vh);aspect-ratio:1;transform-origin:50% 43%;will-change:transform;animation:portal-camera 4.35s cubic-bezier(.64,0,.22,1) both}
.portal-camera svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portal-view{animation:photo-portal 2.7s both}.portal-window-fill{animation:outline-leave .25s 2.4s both}
.portal-doors{position:absolute;inset:0;perspective:850px;transform-style:preserve-3d}
.portal-door{backface-visibility:hidden;will-change:transform;filter:drop-shadow(0 2px 0 #d8812020)}
.portal-door-left{clip-path:inset(0 50% 0 0);transform-origin:14% 44%;animation:door-left 4.35s cubic-bezier(.4,0,.15,1) both}
.portal-door-right{clip-path:inset(0 0 0 50%);transform-origin:86% 44%;animation:door-right 4.35s cubic-bezier(.4,0,.15,1) both}
.portal-outline{fill:none;stroke:#d88623;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;animation:outline-leave .4s 1.65s both}
.portal-outline path{stroke-dasharray:1;stroke-dashoffset:1;animation:house-draw 1s .1s cubic-bezier(.3,0,.2,1) both}
.portal-lettering{animation:letters-away .45s 1.7s both;pointer-events:none}
.portal-lettering path{transform-box:fill-box;transform-origin:center;animation:letter-arrive .65s calc(.3s + var(--letter)*.045s) cubic-bezier(.22,1,.36,1) both}
.portal-caption{z-index:2;position:absolute;top:calc(50% + min(34vw,235px,32.5vh));left:20px;right:20px;text-align:center;animation:caption-away .45s 1.9s both}
.portal-caption>span{display:block;font-size:clamp(18px,2.5vw,30px);letter-spacing:-.045em;animation:caption-arrive .7s .45s both}
.portal-caption small{display:block;margin-top:14px;font-size:8px;letter-spacing:.24em;color:#966226;animation:caption-arrive .7s .7s both}
.intro-skip{position:absolute;right:4.5vw;bottom:35px;z-index:2;display:flex;align-items:center;gap:20px;background:#fff9ecd9;border:1px solid #dfc7a8;border-radius:35px;padding:11px 18px;color:#6b4b2d;font-size:11px}
.intro-skip:hover{background:#ffd98d}
.intro-skip:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
.portal-timeline{position:absolute;bottom:0;left:0;right:0;height:3px;background:#f5a63e20}
.portal-timeline span{display:block;height:100%;background:var(--gold);transform-origin:left;animation:portal-progress 4.35s linear both}
.motion-on .hero-heading .line>span{display:inline-block;animation:hero-rise 1.1s .15s var(--ease) backwards}
.motion-on .hero-heading .line:nth-child(2)>span{animation-delay:.3s}
.motion-on .hero-scene{animation:scene-in 1.3s .35s var(--ease) backwards}
.motion-on .hero-postcard{animation:postcard-in 1.4s .6s var(--ease) backwards}
.motion-on.intro-active .hero-heading .line>span{animation-delay:2.5s}
.motion-on.intro-active .hero-heading .line:nth-child(2)>span{animation-delay:2.65s}
.motion-on.intro-active .hero-scene{animation-delay:2.5s}
.motion-on.intro-active .hero-postcard{animation-delay:2.8s}

@keyframes portal-camera{0%{opacity:1;transform:translateY(48px) scale(.66) rotate(-7deg)}18%{opacity:1;transform:translateY(0) scale(1) rotate(0)}47%{opacity:1;transform:scale(1)}62%{transform:scale(1.12)}88%,100%{opacity:1;transform:scale(12)}}
@keyframes door-left{0%,7%{opacity:0;transform:translateX(-35px)}23%,40%{opacity:1;transform:translateX(0) rotateY(0)}65%,100%{opacity:1;transform:rotateY(-112deg)}}
@keyframes door-right{0%,7%{opacity:0;transform:translateX(35px)}23%,40%{opacity:1;transform:translateX(0) rotateY(0)}65%,100%{opacity:1;transform:rotateY(112deg)}}
@keyframes letter-arrive{from{opacity:0;transform:translateY(25px) rotate(8deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes house-draw{to{stroke-dashoffset:0}}
@keyframes photo-portal{0%,55%{opacity:0}65%,87%{opacity:1}100%{opacity:0}}
@keyframes letters-away{to{opacity:0;transform:translateY(28px)}}
@keyframes outline-leave{to{opacity:0}}
@keyframes caption-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes caption-away{to{opacity:0;transform:translateY(10px)}}
@keyframes portal-labels{to{opacity:0}}
@keyframes portal-depart{from{opacity:1}to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes portal-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wash-arrive{from{opacity:0}to{opacity:1}}
@keyframes orbit-drift{from{opacity:0;transform:rotate(-50deg) scaleY(.56)}25%{opacity:1}to{opacity:0;transform:rotate(-15deg) scaleY(.56)}}
@keyframes orbit-drift-two{from{opacity:0;transform:rotate(48deg) scaleY(.5)}25%{opacity:1}to{opacity:0;transform:rotate(20deg) scaleY(.5)}}
@media(min-width:1600px){.portal-camera{width:min(38vw,680px,65vh)}}
@media(max-width:800px){.hero-landscape{border-top-right-radius:85px}.hero-experience{justify-content:start;margin-top:18px}.hero-replay{font-size:11px;gap:10px}.hero-replay>span:last-child{display:none}.play-house{width:30px;height:30px;font-size:21px}.portal-camera{width:min(88vw,440px,66vh)}.portal-caption{top:calc(50% + min(44vw,220px,33vh))}.portal-caption>span{font-size:22px}.portal-topline{top:25px;left:24px;right:24px;font-size:7px}.intro-skip{bottom:24px;right:24px;font-size:10px;padding:10px 15px}.portal-orbit{min-width:450px;min-height:450px}}
.motion-reduced .brand-intro{display:none!important}.motion-reduced.intro-active{overflow:auto}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none!important}.intro-active{overflow:auto}.hero-replay{display:none!important}*,*:before,*:after{animation:none!important;transition:none!important}}
