/* ==========================================================================
   Notebook page turn between the landing page and the sign-in pages.
   Browsers with cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+)
   turn the real page; page-turn.js provides a fallback for the rest.
   "forward"  = landing → sign in  (current page turns away to the left)
   "back"     = sign in → landing  (previous page turns back over from the left)
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: .95s; }

/* forward: the old page lifts off its left edge like a notebook leaf */
html:active-view-transition-type(pt-forward)::view-transition-old(root) {
    z-index: 2;
    transform-origin: left center;
    animation: pt-leaf-out .95s cubic-bezier(.45, .05, .25, 1) both;
}

html:active-view-transition-type(pt-forward)::view-transition-new(root) {
    z-index: 1;
    animation: pt-under-in .95s ease-out both;
}

/* back: the previous page swings back in over the current one */
html:active-view-transition-type(pt-back)::view-transition-new(root) {
    z-index: 2;
    transform-origin: left center;
    animation: pt-leaf-in .95s cubic-bezier(.45, .05, .25, 1) both;
}

html:active-view-transition-type(pt-back)::view-transition-old(root) {
    z-index: 1;
    animation: pt-under-out .95s ease-in both;
}

/* navigations that aren't page turns: quick cross-fade only */
html:not(:active-view-transition-type(pt-forward, pt-back))::view-transition-old(root),
html:not(:active-view-transition-type(pt-forward, pt-back))::view-transition-new(root) {
    animation-duration: .25s;
}

@keyframes pt-leaf-out {
    0%   { transform: perspective(2400px) rotateY(0); filter: brightness(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    35%  { filter: brightness(.96); box-shadow: 30px 0 60px rgba(0, 0, 0, .25); }
    70%  { opacity: 1; filter: brightness(.7); }
    100% { transform: perspective(2400px) rotateY(-100deg); opacity: 0; filter: brightness(.5); box-shadow: 60px 0 80px rgba(0, 0, 0, .3); }
}

@keyframes pt-leaf-in {
    0%   { transform: perspective(2400px) rotateY(-100deg); opacity: 0; filter: brightness(.5); }
    30%  { opacity: 1; filter: brightness(.7); }
    100% { transform: perspective(2400px) rotateY(0); filter: brightness(1); }
}

@keyframes pt-under-in {
    0%   { transform: scale(.97); filter: brightness(.72); }
    100% { transform: none; filter: brightness(1); }
}

@keyframes pt-under-out {
    0%   { transform: none; filter: brightness(1); }
    100% { transform: scale(.97); filter: brightness(.72); }
}

/* ---------- Fallback (no cross-document View Transitions) ---------- */

html.pt-fallback { perspective: 2400px; overflow-x: hidden; background: #2b2a27; }
html.pt-fallback body { transform-origin: left center; backface-visibility: hidden; }
html.pt-leaving.pt-forward body { animation: pt-leaf-out .8s cubic-bezier(.45, .05, .25, 1) both; }
html.pt-leaving.pt-back body { animation: pt-under-out .5s ease-in both; }
html.pt-entering.pt-forward body { animation: pt-under-in .7s ease-out both; }
html.pt-entering.pt-back body { animation: pt-leaf-in .8s cubic-bezier(.45, .05, .25, 1) both; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
    html.pt-fallback body { animation: none !important; }
}

/* ---------- The page-corner button ---------- */

.pt-corner {
    --size: 118px;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 70;
    width: var(--size);
    height: var(--size);
    display: block;
    color: #fff;
    text-decoration: none;
    filter: drop-shadow(-6px -6px 14px rgba(40, 30, 10, .25));
    transition: width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1);
}

/* the curled-up corner of the current page */
.pt-corner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 49.5%, rgba(0, 0, 0, .18) 50%, #fbf8f1 51%, #e9e2d3 70%, #d9d0bd 100%);
    border-top-left-radius: 14px;
}

/* the next page peeking out underneath */
.pt-corner::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background:
        radial-gradient(120% 120% at 100% 100%, #2bb281 0%, #186e58 55%, #0f4337 100%);
    opacity: 0;
}

.pt-corner__label {
    position: absolute;
    right: 10px;
    bottom: 14px;
    z-index: 1;
    display: grid;
    justify-items: end;
    gap: 2px;
    font: 700 13px/1.1 "Inter", system-ui, sans-serif;
    color: #186e58;
    text-align: right;
}

.pt-corner__label small { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8b8373; }
.pt-corner__label i { font-style: normal; transition: transform .3s; }

.pt-corner:hover,
.pt-corner:focus-visible { --size: 150px; outline: none; }
.pt-corner:hover .pt-corner__label i { transform: translate(3px, -3px); }
.pt-corner:focus-visible::before { box-shadow: inset 0 0 0 3px #229e72; }

.pt-corner.is-turning { --size: 100vmax; transition-duration: .5s; }

@media (max-width: 575.98px) { .pt-corner { --size: 92px; } .pt-corner__label { font-size: 12px; } }
@media print { .pt-corner { display: none; } }

/* inline "back" button on the sign-in pages */
.pt-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #186e58;
    text-decoration: none;
    background: #e8e3d7;
    border: 1px solid #d6cdbd;
    transition: background .2s, transform .2s;
}

.pt-back:hover { color: #186e58; background: #e3ecdf; transform: translateX(-2px); }
.pt-back svg { width: 14px; height: 14px; }