/* The turning 3D Oxford logo (static/logo3d.js). The OC and the gold ribbon
   turn slowly, front only; the ribbon is cut into slices bent back toward
   its ends, each with a deep gold edge. Under the mark's ribbon sits a bed
   of soap foam, and bubbles rise and get swept out to the sides. */
.l3d { position: relative; display: inline-block; vertical-align: middle; flex: none; line-height: 0; }
/* The original image stays (hidden) so theme switches can still swap its
   file; page animations aimed at it move to the 3D logo instead. */
.l3d > .l3d-src { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; visibility: hidden !important; animation: none !important; transition: none !important; pointer-events: none; }
.l3d-stage { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; }
.l3d-lean, .l3d-coin, .l3d-depth { position: absolute; inset: 0; transform-style: preserve-3d; }
.l3d-coin { animation: l3d-turn 8s linear infinite; }
.l3d-depth { animation: l3d-depth 8s linear infinite; }
.l3d-calm .l3d-coin, .l3d-calm .l3d-depth { animation-duration: 14s; }
.l3d-off .l3d-coin, .l3d-off .l3d-depth { animation-play-state: paused; }
/* Front only: it turns to edge-on, then carries on from the other edge. All
   the depth folds flat at that moment, so the swap can't be seen. */
@keyframes l3d-turn { 0% { transform: rotateY(-90deg); } 100% { transform: rotateY(90deg); } }
@keyframes l3d-depth { 0% { transform: scaleZ(0); } 18% { transform: scaleZ(1); } 82% { transform: scaleZ(1); } 100% { transform: scaleZ(0); } }
.l3d-rs { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; backface-visibility: hidden; }
.l3d-rs i { position: absolute; inset: 0; background-image: var(--l3d-rib); background-repeat: no-repeat; backface-visibility: hidden; }
.l3d-rs i.b { filter: brightness(.4) saturate(.85); }
.l3d-rs i:last-child { filter: brightness(var(--sh, 1)); }
/* Pages style their logo <img>s (sizes, max-width); the layers keep theirs. */
.l3d img.l3d-oc, .l3d img.l3d-words { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain; }
.l3d-oc.e { filter: brightness(.4) saturate(.9); }
.l3d-oc.f { backface-visibility: hidden; }
.l3d-words { z-index: 2; }
/* On a pale background the stacked edge would read as a black band. */
.l3d-onlight .l3d-rs i.b { filter: brightness(.78) sepia(.35) saturate(1.15); }
.l3d-onlight .l3d-oc.e { filter: brightness(.72) saturate(1.1); }

/* Bubbles */
.l3d-fx { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.l3d-fx.back { z-index: 1; } .l3d-fx.front { z-index: 5; }
.l3d-bub { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,0) 18%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.45) 0 5%, rgba(255,255,255,0) 12%),
    radial-gradient(circle, rgba(255,255,255,.04) 45%, rgba(140,220,255,.40) 66%, rgba(255,160,225,.55) 80%, rgba(255,232,150,.7) 91%, rgba(255,255,255,.85) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 0 6px rgba(200,235,255,.25); }
.l3d-fx.back .l3d-bub { filter: brightness(.8); }
.l3d-onlight .l3d-bub { background:
    radial-gradient(circle at 30% 26%, #fff 0 9%, rgba(255,255,255,0) 19%),
    radial-gradient(circle, rgba(255,255,255,.2) 45%, rgba(90,170,230,.42) 66%, rgba(214,110,186,.42) 80%, rgba(212,168,70,.5) 91%, rgba(80,110,140,.65) 100%);
  box-shadow: inset 0 0 0 1px rgba(70,100,130,.5); }
.l3d-onlight .l3d-fx.back .l3d-bub { filter: none; opacity: .8; }

/* Foam: a 120 x 30 bed drawn at the mark's design size, scaled to fit. */
.l3d-foam { position: absolute; left: 0; top: 0; width: 120px; height: 30px; z-index: 4; pointer-events: none; transform-origin: 0 0; }
.l3d-foam::before { content: ""; position: absolute; left: 0; right: 0; top: 4%; bottom: -14%; border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse 50% 60% at 50% 62%, rgba(246,250,253,.78), rgba(230,240,248,.5) 45%, rgba(220,234,244,.18) 75%, transparent); filter: blur(2.5px); }
.l3d-foam::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -6px; height: 7px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent); z-index: -1; }
.l3d-foam i { position: absolute; border-radius: 50%; animation: l3d-froth 3s ease-in-out infinite;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0 7%, rgba(255,255,255,0) 17%),
    radial-gradient(circle, rgba(255,255,255,.30) 52%, rgba(236,245,252,.55) 80%, rgba(255,255,255,.75) 94%, rgba(255,255,255,.2) 100%); }
.l3d-foam i.hz { background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.8) 0 6%, rgba(255,255,255,0) 16%), radial-gradient(circle, rgba(250,252,255,.5) 45%, rgba(240,246,252,.62) 82%, rgba(255,255,255,.7) 100%); }
.l3d-onlight .l3d-foam::before { background: radial-gradient(ellipse 50% 60% at 50% 62%, rgba(196,214,230,.7), rgba(206,222,236,.45) 45%, rgba(214,228,240,.15) 75%, transparent); }
.l3d-onlight .l3d-foam::after { background: radial-gradient(closest-side, rgba(60,50,30,.18), transparent); }
.l3d-onlight .l3d-foam i { box-shadow: 0 1px 1px rgba(60,80,100,.18);
  background:
    radial-gradient(circle at 32% 28%, #fff 0 9%, rgba(255,255,255,0) 19%),
    radial-gradient(circle, rgba(255,255,255,.55) 50%, rgba(214,230,244,.75) 78%, rgba(118,150,180,.7) 94%, rgba(118,150,180,.25) 100%); }
.l3d-onlight .l3d-foam i.hz { background: radial-gradient(circle at 34% 30%, #fff 0 8%, rgba(255,255,255,0) 18%), radial-gradient(circle, rgba(250,252,255,.8) 45%, rgba(222,234,246,.85) 82%, rgba(130,160,188,.6) 100%); }
.l3d-off .l3d-foam i { animation-play-state: paused; }
/* A phone that couldn't keep up (logo3d.js giveUp): the plain logo. */
.l3d-still > .l3d-src { opacity: 1 !important; visibility: visible !important; }
.l3d-still > :not(.l3d-src) { display: none !important; }
@keyframes l3d-froth { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, .96); } }
@media (prefers-reduced-motion: reduce) {
  .l3d-coin, .l3d-depth, .l3d-foam i { animation: none; }
  .l3d-fx { display: none; }
}

/* The owner's own animated logo (Settings > Branding > Animated logo). */
.l3d-file > .l3d-anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; }
.l3d-file.l3d-ready > .l3d-anim { opacity: 1; }
.l3d-file.l3d-ready > .l3d-under { opacity: 0 !important; }
/* An uploaded still logo turned gently, with bubbles rising past it. */
.l3d-swing { perspective: 600px; }
.l3d-swing > .l3d-swinger { animation: l3d-swing 6s ease-in-out infinite; transform-origin: 50% 50%; }
.l3d-swing.l3d-calm > .l3d-swinger { animation-duration: 10s; }
@keyframes l3d-swing { 0%, 100% { transform: rotateY(-24deg); } 50% { transform: rotateY(24deg); } }
.l3d-bubbles { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.l3d-bubbles i { position: absolute; bottom: 4%; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 45%, rgba(190,215,235,.15) 70%);
    box-shadow: inset 0 0 1px rgba(120,150,180,.7); animation: l3d-bubble 4s ease-in infinite; }
@keyframes l3d-bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(var(--l3d-rise, -60px)) scale(1.1); opacity: 0; } }