/* ========================================================= PROJECT ONE — GLOBAL CRUMPLED PAGE TRANSITION / v64 Crumple 1 lives here. Crumple 2 is critical inline CSS in each page so it starts before external CSS/JS and cannot have a blank handoff frame. ========================================================= */ body.p1-transition-active { overflow: hidden !important; overscroll-behavior: none; } /* Nav, CD and cursor are intentionally treated as objects outside the paper. */ body.p1-transition-active .editorial-nav { z-index: 20120 !important; } body.p1-transition-active .music-cd-dock { z-index: 20140 !important; } body.p1-transition-active .music-ipod-popover { z-index: 20135 !important; } body.p1-transition-active .cursor-point { z-index: 20200 !important; } body.p1-transition-active .menu-drawer { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-12px) scaleY(.96) !important; transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s !important; } .p1-crumple-stage { position: fixed; z-index: 20000; inset: 0; overflow: hidden; pointer-events: none; perspective: 1200px; isolation: isolate; background: #09090b; } .p1-crumple-bridge{ --p1-bridge-x:-38vw; --p1-bridge-y:-38vh; --p1-bridge-rot:-48deg; position:absolute; z-index:1; inset:0; overflow:hidden; transform-origin:50% 50%; will-change:transform,clip-path,filter,opacity; background: linear-gradient(28deg,transparent 0 48.7%,rgba(255,255,255,.085) 49.45%,rgba(0,0,0,.20) 50.2%,transparent 51%), linear-gradient(151deg,transparent 0 44.8%,rgba(0,0,0,.23) 49.35%,rgba(255,255,255,.07) 50.15%,transparent 54.2%), linear-gradient(81deg,transparent 0 61.8%,rgba(255,255,255,.055) 62.8%,rgba(0,0,0,.15) 63.8%,transparent 64.8%), radial-gradient(circle at 72% 30%,rgba(91,7,17,.74),transparent 32%), linear-gradient(rgba(241,239,231,.043) 1px,transparent 1px), linear-gradient(90deg,rgba(241,239,231,.043) 1px,transparent 1px), #09090b; background-size:auto,auto,auto,auto,12.5vw 12.5vw,12.5vw 12.5vw,auto; } .p1-crumple-stage.is-bridge-crumpling .p1-crumple-bridge{ animation:p1BridgeCrumple 1.08s cubic-bezier(.56,.02,.28,1) both; } @keyframes p1BridgeCrumple{ 0%{ opacity:1; transform:perspective(1200px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1); clip-path:inset(0); filter:brightness(1) saturate(1); box-shadow:inset 0 0 150px rgba(0,0,0,.18),0 0 0 rgba(0,0,0,0); } 16%{ opacity:1; transform:perspective(1200px) translate3d(.2vw,.3vh,16px) rotateX(1.5deg) rotateY(-2deg) rotateZ(.4deg) scale(.988); clip-path:polygon(1% 2%,26% 0,49% 2%,74% 0,99% 3%,100% 27%,98% 53%,100% 80%,96% 99%,70% 97%,49% 100%,25% 97%,2% 99%,0 72%,2% 49%,0 22%); filter:brightness(.98) saturate(.96); box-shadow:inset 0 0 150px rgba(0,0,0,.22),0 20px 65px rgba(0,0,0,.12); } 35%{ opacity:1; transform:perspective(1200px) translate3d(1vw,-.5vh,52px) rotateX(5deg) rotateY(-7deg) rotateZ(2deg) scale(.91); clip-path:polygon(6% 8%,25% 3%,48% 8%,72% 3%,95% 9%,98% 29%,93% 52%,98% 76%,90% 95%,68% 90%,48% 98%,27% 91%,7% 95%,10% 70%,3% 51%,10% 27%); filter:brightness(.89) saturate(.83) contrast(1.04); box-shadow:inset 0 0 140px rgba(0,0,0,.26),0 34px 85px rgba(0,0,0,.25); } 58%{ opacity:1; transform:perspective(1200px) translate3d(2.5vw,-2vh,104px) rotateX(12deg) rotateY(-16deg) rotateZ(6deg) scale(.68); clip-path:polygon(13% 18%,30% 9%,48% 17%,66% 8%,87% 20%,92% 38%,84% 56%,92% 74%,78% 89%,59% 83%,44% 93%,27% 83%,11% 87%,16% 65%,7% 50%,18% 34%); filter:brightness(.72) saturate(.64) contrast(1.10); box-shadow:inset 0 0 120px rgba(0,0,0,.32),0 50px 115px rgba(0,0,0,.46); } 79%{ opacity:.95; transform:perspective(1200px) translate3d(-4vw,-5vh,165px) rotateX(25deg) rotateY(-33deg) rotateZ(-17deg) scale(.38); clip-path:polygon(22% 25%,36% 16%,50% 25%,63% 15%,78% 30%,74% 43%,83% 57%,70% 70%,77% 83%,57% 78%,45% 88%,35% 75%,20% 79%,25% 61%,15% 49%,27% 38%); filter:brightness(.54) saturate(.44) contrast(1.18); box-shadow:inset 0 0 100px rgba(0,0,0,.42),0 65px 145px rgba(0,0,0,.66); } 100%{ opacity:0; transform:perspective(1200px) translate3d(var(--p1-bridge-x,-38vw),var(--p1-bridge-y,-38vh),225px) rotateX(50deg) rotateY(-59deg) rotateZ(var(--p1-bridge-rot,-48deg)) scale(.07); clip-path:polygon(34% 31%,44% 23%,54% 30%,64% 22%,70% 37%,64% 48%,71% 58%,61% 69%,65% 78%,52% 72%,43% 79%,37% 68%,28% 70%,33% 57%,27% 48%,36% 41%); filter:brightness(.34) saturate(.22) blur(1px); box-shadow:0 80px 165px rgba(0,0,0,.78); } } .p1-crumple-visual { --p1-throw-x: 46vw; --p1-throw-y: -36vh; --p1-throw-rot: 42deg; position: absolute; z-index: 5; inset: 0; overflow: hidden; background: #09090b; transform-origin: 50% 50%; will-change: transform, clip-path, filter, opacity; box-shadow: 0 0 0 rgba(0,0,0,0); } .p1-crumple-page { position: absolute; left: 0; width: 100%; min-height: 100vh; transform: translateZ(0); backface-visibility: hidden; } .p1-crumple-stage.is-crumpling .p1-crumple-visual { animation: p1PaperCrumple 1.14s cubic-bezier(.56,.02,.28,1) forwards; } @keyframes p1PaperCrumple { 0% { transform: perspective(1100px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1); clip-path: inset(0 round 0); filter: brightness(1) saturate(1); box-shadow: 0 0 0 rgba(0,0,0,0); } 16% { transform: perspective(1100px) translate3d(0,1vh,0) rotateX(1.4deg) rotateY(-1.8deg) rotateZ(.35deg) scale(.985); clip-path: polygon(1% 1%, 49% 0%, 99% 2%, 100% 49%, 98% 99%, 51% 100%, 1% 98%, 0% 50%); filter: brightness(.98) saturate(.96); } 36% { transform: perspective(1100px) translate3d(-1.5vw,1.5vh,18px) rotateX(4deg) rotateY(-5deg) rotateZ(-1deg) scale(.93); clip-path: polygon(5% 8%, 23% 3%, 48% 6%, 73% 1%, 95% 8%, 99% 31%, 96% 55%, 100% 77%, 91% 95%, 63% 91%, 48% 99%, 26% 93%, 7% 97%, 1% 73%, 5% 49%, 0% 24%); filter: brightness(.9) saturate(.86) contrast(1.04); box-shadow: 0 32px 70px rgba(0,0,0,.2); } 58% { transform: perspective(1100px) translate3d(4vw,-1vh,70px) rotateX(11deg) rotateY(-14deg) rotateZ(6deg) scale(.72); clip-path: polygon(12% 18%, 29% 7%, 47% 16%, 67% 7%, 87% 20%, 92% 40%, 84% 57%, 93% 73%, 79% 89%, 57% 82%, 43% 94%, 24% 84%, 9% 88%, 13% 67%, 5% 51%, 15% 35%); filter: brightness(.74) saturate(.7) contrast(1.11); box-shadow: 0 46px 100px rgba(0,0,0,.42); } 77% { opacity: 1; transform: perspective(1100px) translate3d(11vw,-5vh,110px) rotateX(22deg) rotateY(-28deg) rotateZ(18deg) scale(.43); clip-path: polygon(22% 23%, 36% 15%, 50% 24%, 63% 13%, 78% 28%, 74% 43%, 83% 56%, 71% 70%, 76% 83%, 57% 78%, 45% 88%, 35% 74%, 20% 78%, 25% 61%, 15% 49%, 27% 38%); filter: brightness(.58) saturate(.54) contrast(1.18); box-shadow: 0 60px 130px rgba(0,0,0,.62); } 100% { opacity: 0; transform: perspective(1100px) translate3d(var(--p1-throw-x),var(--p1-throw-y),180px) rotateX(48deg) rotateY(-56deg) rotateZ(var(--p1-throw-rot)) scale(.12); clip-path: polygon(33% 31%, 44% 22%, 54% 29%, 65% 22%, 70% 37%, 64% 48%, 71% 58%, 61% 69%, 65% 79%, 52% 72%, 43% 79%, 37% 68%, 27% 70%, 33% 57%, 27% 48%, 36% 41%); filter: brightness(.42) saturate(.32) contrast(1.3) blur(.7px); box-shadow: 0 80px 160px rgba(0,0,0,.76); } } /* Fold facets: these are not decorative lines; they create changing light planes while the actual live viewport is being compressed underneath. */ .p1-crumple-fold, .p1-crumple-crease { position: absolute; z-index: 20; inset: 0; pointer-events: none; opacity: 0; } .p1-crumple-stage.is-crumpling .p1-crumple-fold { animation: p1FoldFlash 1.02s cubic-bezier(.45,.03,.3,1) forwards; } .p1-crumple-fold.f1 { clip-path: polygon(0 0, 52% 0, 42% 58%, 0 45%); background: linear-gradient(134deg,rgba(255,255,255,.19),rgba(0,0,0,.3)); animation-delay:.05s!important; } .p1-crumple-fold.f2 { clip-path: polygon(52% 0, 100% 0, 100% 43%, 61% 53%); background: linear-gradient(221deg,rgba(0,0,0,.36),rgba(255,255,255,.13)); animation-delay:.09s!important; } .p1-crumple-fold.f3 { clip-path: polygon(0 45%, 42% 58%, 48% 100%, 0 100%); background: linear-gradient(47deg,rgba(0,0,0,.32),rgba(255,255,255,.12)); animation-delay:.13s!important; } .p1-crumple-fold.f4 { clip-path: polygon(61% 53%, 100% 43%, 100% 100%, 48% 100%); background: linear-gradient(310deg,rgba(255,255,255,.15),rgba(0,0,0,.37)); animation-delay:.16s!important; } .p1-crumple-fold.f5 { clip-path: polygon(42% 58%, 52% 0, 61% 53%, 48% 100%); background: linear-gradient(90deg,rgba(0,0,0,.26),rgba(255,255,255,.14),rgba(0,0,0,.22)); animation-delay:.2s!important; } .p1-crumple-fold.f6 { clip-path: polygon(0 45%, 42% 58%, 61% 53%, 100% 43%, 75% 64%, 48% 61%, 22% 68%); background: linear-gradient(180deg,rgba(255,255,255,.11),rgba(0,0,0,.24)); animation-delay:.24s!important; } @keyframes p1FoldFlash { 0%, 8% { opacity: 0; filter: contrast(1); } 26% { opacity: .42; } 54% { opacity: .73; filter: contrast(1.18); } 83% { opacity: .55; } 100% { opacity: 0; filter: contrast(1.35); } } .p1-crumple-crease { inset: auto; height: 1px; width: 72vw; background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),rgba(0,0,0,.5),transparent); box-shadow: 0 1px 0 rgba(0,0,0,.16); transform-origin: center; } .p1-crumple-crease.c1 { left:-7vw; top:45%; transform:rotate(11deg) scaleX(0); } .p1-crumple-crease.c2 { right:-12vw; top:52%; transform:rotate(-9deg) scaleX(0); } .p1-crumple-crease.c3 { left:19%; top:28%; width:64vw; transform:rotate(67deg) scaleX(0); } .p1-crumple-crease.c4 { left:24%; top:69%; width:58vw; transform:rotate(-63deg) scaleX(0); } .p1-crumple-crease.c5 { left:34%; top:50%; width:36vw; transform:rotate(2deg) scaleX(0); } .p1-crumple-stage.is-crumpling .p1-crumple-crease.c1 { animation:p1Crease1 .72s ease-out .05s forwards; } .p1-crumple-stage.is-crumpling .p1-crumple-crease.c2 { animation:p1Crease2 .72s ease-out .11s forwards; } .p1-crumple-stage.is-crumpling .p1-crumple-crease.c3 { animation:p1Crease3 .68s ease-out .16s forwards; } .p1-crumple-stage.is-crumpling .p1-crumple-crease.c4 { animation:p1Crease4 .64s ease-out .21s forwards; } .p1-crumple-stage.is-crumpling .p1-crumple-crease.c5 { animation:p1Crease5 .58s ease-out .25s forwards; } @keyframes p1Crease1 { 0%{opacity:0;transform:rotate(11deg) scaleX(0)} 35%,75%{opacity:.85;transform:rotate(11deg) scaleX(1)} 100%{opacity:0;transform:rotate(11deg) scaleX(.52)} } @keyframes p1Crease2 { 0%{opacity:0;transform:rotate(-9deg) scaleX(0)} 35%,75%{opacity:.8;transform:rotate(-9deg) scaleX(1)} 100%{opacity:0;transform:rotate(-9deg) scaleX(.5)} } @keyframes p1Crease3 { 0%{opacity:0;transform:rotate(67deg) scaleX(0)} 35%,75%{opacity:.75;transform:rotate(67deg) scaleX(1)} 100%{opacity:0;transform:rotate(67deg) scaleX(.45)} } @keyframes p1Crease4 { 0%{opacity:0;transform:rotate(-63deg) scaleX(0)} 35%,75%{opacity:.7;transform:rotate(-63deg) scaleX(1)} 100%{opacity:0;transform:rotate(-63deg) scaleX(.4)} } @keyframes p1Crease5 { 0%{opacity:0;transform:rotate(2deg) scaleX(0)} 35%,75%{opacity:.7;transform:rotate(2deg) scaleX(1)} 100%{opacity:0;transform:rotate(2deg) scaleX(.3)} } .p1-transition-click-mark { position: absolute; z-index: 40; width: 11px; height: 11px; border-radius: 50%; background: #ef3a31; box-shadow: 0 0 0 0 rgba(239,58,49,.38); transform: translate(-50%,-50%); animation: p1ClickPulse .54s ease-out both; } @keyframes p1ClickPulse { 0% { transform:translate(-50%,-50%) scale(.45); box-shadow:0 0 0 0 rgba(239,58,49,.4); } 65% { transform:translate(-50%,-50%) scale(1); box-shadow:0 0 0 34px rgba(239,58,49,0); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.8); } } @media (max-width: 720px) { .p1-crumple-stage.is-crumpling .p1-crumple-visual { animation-duration: .92s; } .p1-crumple-stage.is-bridge-crumpling .p1-crumple-bridge { animation-duration: .94s; } } @media (prefers-reduced-motion: reduce) { .p1-crumple-fold, .p1-crumple-crease { display:none!important; } .p1-crumple-stage.is-crumpling .p1-crumple-visual { animation: p1ReducedTransition .28s ease both; } @keyframes p1ReducedTransition { to { opacity:0; transform:scale(.96); } } }