/* Sentry Operations, sentry-ops.com. One stylesheet for every page. Nothing on the site uses inline styles, so the content policy can forbid them.
   Brand guidelines v3.0: Black, white and gunmetal; red only for the logo dot; IBM Plex Sans and Mono with Arial as the fallback. */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexSans-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/IBMPlexSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-Regular.woff2) format('woff2')}

:root{
  --black:#0D0E10;--gunmetal:#2B3036;--graphite:#50565D;--steel:#8E949A;--silver:#E6E8EA;--white:#FFFFFF;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --sans:'IBM Plex Sans',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--silver);font-family:var(--sans);-webkit-text-size-adjust:100%;text-size-adjust:100%}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------------ the holding page */

.home,.home body{height:100%;overflow:hidden}

/* The world behind the logo: poster, footage, grain and vignette. The page is Black while the logo assembles; when the red dot lights,
   the picture opens outward from the dot. player.js sets --ox and --oy to the dot's position, adds .open, and adds .clear once it is open. */
@property --iris{syntax:'<length>';inherits:false;initial-value:0px}
#world{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden}
.js #world{--iris:0px;transition:--iris 1.7s cubic-bezier(.55,0,.2,1);
  -webkit-mask-image:radial-gradient(circle at var(--ox,50%) var(--oy,46%),#000 calc(var(--iris) - 14vmax),transparent var(--iris));
  mask-image:radial-gradient(circle at var(--ox,50%) var(--oy,46%),#000 calc(var(--iris) - 14vmax),transparent var(--iris))}
.js #world.open{--iris:170vmax}
.js #world.clear{-webkit-mask-image:none;mask-image:none;transition:none}
.js #world.shut{transition:none}   /* closes at once at the end of a round, before it opens again */

/* Poster: a 16 by 9 grid of greys from the opener's first frame, blurred. It shows only if the first clip is slow to arrive. */
#poster{position:absolute;left:-6vmax;top:-6vmax;width:calc(100% + 12vmax);height:calc(100% + 12vmax);filter:blur(3vmax);transition:opacity 2s ease}
#poster.off{opacity:0}

/* Footage. Two players crossfade. player.js sizes and places each picture (--vw, --vh, --vx, --vy) so that the clip's subject sits where
   the page wants it on any screen shape. --look is used only by the preview, which plays ungraded originals; the site's own files are graded. */
#stage{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}
#stage video{position:absolute;left:0;top:0;width:var(--vw,100%);height:var(--vh,100%);transform:translate(var(--vx,0px),var(--vy,0px));transform-origin:var(--tox,50%) var(--toy,50%);object-fit:cover;opacity:0;transition:opacity 1.8s ease}
#stage video.on{opacity:1}
#stage video.now{transition:none}   /* a hard cut: no dissolve */
/* Each shot pushes in slowly while it plays, about the middle of the screen. */
@keyframes push{0%{scale:1.1;animation-timing-function:cubic-bezier(.1,.8,.2,1)}7%{scale:1.02;animation-timing-function:linear}100%{scale:1.07}}   /* a quick snap in at the head of the shot, then the slow push */
#stage video.push{animation:push var(--dur,16s) linear both}
#stage.raw video{filter:var(--look,none)}

/* Film grain: one noise texture, drawn once, moved between eight positions about twelve times a second. */
#grain{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;opacity:.13;mix-blend-mode:overlay}
#grain canvas{position:absolute;left:-256px;top:-256px;animation:grain .64s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}12.5%{transform:translate(97px,173px)}25%{transform:translate(211px,41px)}37.5%{transform:translate(38px,229px)}50%{transform:translate(157px,112px)}62.5%{transform:translate(243px,198px)}75%{transform:translate(71px,64px)}87.5%{transform:translate(184px,247px)}}
/* On a cut the grain becomes a split-second burst of static with two dark bands, like a video feed switching. */
#grain::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;background:repeating-linear-gradient(to bottom,rgba(13,14,16,0) 0,rgba(13,14,16,0) 31%,rgba(13,14,16,.6) 31%,rgba(13,14,16,.6) 35%,rgba(13,14,16,0) 35%,rgba(13,14,16,0) 50%)}
#grain.burst{opacity:.9;mix-blend-mode:normal}
#grain.burst::after{opacity:1}
#grain.burst canvas{scale:3 2;transform-origin:0 0;animation:burst .12s steps(1) infinite}
@keyframes burst{0%{transform:translate(0,0)}33%{transform:translate(60px,-20px)}66%{transform:translate(-30px,40px)}}

/* A lens vignette: clear in the middle, darker toward the corners. */
#vig{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;background:radial-gradient(ellipse 78% 78% at 50% 46%,rgba(13,14,16,0) 50%,rgba(13,14,16,.5) 100%)}

/* A 1 px line along the bottom shows the first clip arriving, then fades. */
#load{position:fixed;left:0;right:0;bottom:0;height:1px;background:var(--silver);opacity:.7;transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .3s linear,opacity .8s ease}
#load.done{opacity:0}

/* The logo and the address. They sit on a soft dark plate that is part of this block, so it is always behind them whatever the screen:
   the logo is never on busy picture, and the address keeps its contrast on any frame. */
.home main{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 8vw 6vh;pointer-events:none;
  transform:translate(var(--px,0px),var(--py,0px));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lockup{position:relative;display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.lockup::before{content:"";position:absolute;left:50%;top:50%;width:230%;height:300%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(13,14,16,.54) 0%,rgba(13,14,16,.5) 50%,rgba(13,14,16,.22) 78%,rgba(13,14,16,0) 100%)}
.lockup > *{position:relative}
.home h1{font-size:0;line-height:0}
.logo{display:block;width:min(78vw,560px,118vh);height:auto;overflow:visible}

/* Logo assembly: bars slide in, the diamond turns into place, the triangles extend, the letters settle, the red dot lights last. */
.logo .barsL,.logo .barsR,.logo .dia,.logo .arrows,.logo .dot,.logo .ltr,.logo .tm{opacity:0;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.logo .barsL{animation-name:inL;animation-duration:.9s;animation-delay:.3s}
.logo .barsR{animation-name:inR;animation-duration:.9s;animation-delay:.3s}
.logo .dia{transform-box:fill-box;transform-origin:50% 50%;animation-name:turn;animation-duration:1.1s;animation-delay:.45s}
.logo .arrows{transform-box:fill-box;transform-origin:50% 50%;animation-name:ext;animation-duration:.8s;animation-delay:.9s}
.logo .word .ltr{animation-name:settle;animation-duration:.7s}
.logo .word .ltr:nth-child(1){animation-delay:.9s}.logo .word .ltr:nth-child(2){animation-delay:.97s}.logo .word .ltr:nth-child(3){animation-delay:1.04s}
.logo .word .ltr:nth-child(4){animation-delay:1.11s}.logo .word .ltr:nth-child(5){animation-delay:1.18s}.logo .word .ltr:nth-child(6){animation-delay:1.25s}
.logo .sub .ltr{animation-name:settle2;animation-duration:.6s}
.logo .sub .ltr:nth-child(1){animation-delay:1.3s}.logo .sub .ltr:nth-child(2){animation-delay:1.335s}.logo .sub .ltr:nth-child(3){animation-delay:1.37s}
.logo .sub .ltr:nth-child(4){animation-delay:1.405s}.logo .sub .ltr:nth-child(5){animation-delay:1.44s}.logo .sub .ltr:nth-child(6){animation-delay:1.475s}
.logo .sub .ltr:nth-child(7){animation-delay:1.51s}.logo .sub .ltr:nth-child(8){animation-delay:1.545s}.logo .sub .ltr:nth-child(9){animation-delay:1.58s}
.logo .sub .ltr:nth-child(10){animation-delay:1.615s}
.logo .tm{animation-name:fi;animation-duration:.6s;animation-delay:1.8s}
.logo .dot{animation:light .6s 1.6s both;transform-box:fill-box;transform-origin:50% 50%}
.logo.reset *{animation:none!important}   /* player.js adds and removes this to play the assembly again at the start of each round */
.js .logo .dot{animation:light .6s 1.6s both,beat 4s 2.6s ease-in-out infinite}   /* a faint, slow pulse, like a status light; the Pause control stops it */
@keyframes inL{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes inR{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes turn{from{opacity:0;transform:rotate(90deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes ext{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes settle2{from{opacity:0;transform:translateY(2.5px)}to{opacity:1;transform:none}}
@keyframes light{from{opacity:0}60%{opacity:1}to{opacity:1}}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes su{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* The address types on from a fixed left edge (its full width is reserved), then its underline draws. Clicking copies it as well as opening mail. */
.contact{position:relative;display:inline-block;margin-top:clamp(28px,5.2vh,56px);padding:6px 2px 9px;font-family:var(--mono);font-weight:400;font-size:clamp(15px,calc(1.2vw + 4px),19px);line-height:1.3;letter-spacing:.02em;
  color:var(--white);text-decoration:none;white-space:nowrap;opacity:0;animation:fi .2s 1.95s both}
.contact::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:1px;background:rgba(255,255,255,.45);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1),background-color .2s}
.js .contact::after{transform:scaleX(0)}
.js .contact.done::after{transform:scaleX(1)}
.contact:hover::after,.contact:focus-visible::after{background:var(--white)}
.contact .addr{display:inline-block;transition:opacity .25s}
.contact .rest{visibility:hidden}
.contact .typed{position:relative}
.contact .typed::after{content:"";position:absolute;left:100%;top:.1em;margin-left:1px;width:.55em;height:1.05em;background:var(--white);opacity:0}
.contact.typing .typed::after{opacity:1;animation:blink 1s steps(1) infinite}
.contact .msg{position:absolute;left:0;right:0;top:6px;text-align:center;opacity:0;transition:opacity .25s}
.contact.copied .addr{opacity:0}
.contact.copied .msg{opacity:1}


/* Footer: one line, the company label as on the brand's covers, then Privacy, Terms and the Pause control. It sits on its own dark base. */
.home footer{position:fixed;left:0;right:0;bottom:0;z-index:1;padding:0 6vw max(18px,env(safe-area-inset-bottom));text-align:center;color:var(--steel)}
.home footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(100% + 120px);pointer-events:none;
  background:linear-gradient(to top,rgba(13,14,16,.96) 0,rgba(13,14,16,.92) calc(100% - 120px),rgba(13,14,16,.66) calc(100% - 88px),rgba(13,14,16,.3) calc(100% - 50px),rgba(13,14,16,.1) calc(100% - 20px),rgba(13,14,16,0) 100%)}
.home footer p{position:relative;opacity:0;animation:su .9s 3.2s ease-out both}
.label{font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase}
.label .links{white-space:nowrap}
.label a{display:inline-block;margin:-10px 0;padding:10px 1px;color:inherit;text-decoration:underline;text-decoration-color:rgba(142,148,154,.55);text-underline-offset:4px}
.label a:hover{color:var(--white);text-decoration-color:var(--white)}

/* Pause and play, for anyone who wants the picture still: a word at the end of the footer line, set like the links beside it.
   Its width is fixed to the longer of its two labels so the line does not move when it changes. */
.ctl[hidden]{display:none}
#motion{display:inline-block;min-width:calc(11ch + 1.54em + 2px);margin:-10px 0;padding:10px 1px;border:0;border-radius:0;background:none;-webkit-appearance:none;appearance:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;color:inherit;text-decoration:underline;text-decoration-color:rgba(142,148,154,.55);text-underline-offset:4px;cursor:pointer}
#motion:hover{color:var(--white);text-decoration-color:var(--white)}
.paused #grain canvas,.paused .logo .dot,.paused #stage video{animation-play-state:paused}

@media (max-width:600px){
  .home footer{padding-left:7vw;padding-right:7vw}
  .label .co{display:block}
  .label .sep{display:none}
}
@media (max-height:480px){
  .home main{padding-bottom:10vh}
  .contact{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
  .logo .barsL,.logo .barsR,.logo .dia,.logo .arrows,.logo .dot,.logo .ltr,.logo .tm,.contact,.home footer p{animation:none!important;opacity:1!important;transform:none!important}
  #grain canvas,#stage video.push{animation:none}
  .js #world{-webkit-mask-image:none;mask-image:none;transition:none}
  .home main{transform:none;transition:none}
  #poster,#stage video,#load,.contact::after,.contact .addr,.contact .msg{transition:none}
  .js .contact::after{transform:scaleX(1)}
}

/* ------------------------------------------------------------------ the privacy, terms and not-found pages */

.doc{font-size:17px;line-height:1.6}
.doc body{min-height:100vh;display:flex;flex-direction:column}
.doc header{padding:28px 6vw 0}
.doc header a{display:inline-block}
.doc .logo-static{display:block;width:min(58vw,280px);height:auto;overflow:visible}
.doc main{flex:1;width:min(100% - 12vw,700px);margin:0 auto;padding:46px 0 64px}
.doc h1{font-size:clamp(27px,3.2vw,34px);font-weight:600;color:var(--white);line-height:1.2;margin-bottom:10px}
.doc h2{font-size:clamp(18px,2vw,21px);font-weight:600;color:var(--white);line-height:1.3;margin:38px 0 10px}
.doc p{margin:0 0 14px}
.doc p strong{color:var(--white);font-weight:600}
.doc ul{margin:0 0 14px 1.2em}
.doc li{margin-bottom:6px}
.doc a{color:var(--silver);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--white)}
.doc .meta{font-family:var(--mono);font-size:13px;color:var(--steel);margin-bottom:28px;letter-spacing:.02em}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:15px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--gunmetal)}
.doc th{color:var(--white);font-weight:600}
.doc footer{padding:26px 6vw 34px;font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);border-top:1px solid var(--gunmetal)}
.doc footer a{color:var(--steel)}
.doc footer a:hover{color:var(--white)}
@media (max-width:600px){
  .doc{font-size:16px}
  .doc main{padding:32px 0 48px}
  .doc thead{display:none}
  .doc tr{display:block;border-bottom:1px solid var(--gunmetal);padding-bottom:8px}
  .doc th,.doc td{display:block;padding:6px 0;border:0}
  .doc td:first-child{padding-top:14px;color:var(--white)}
}
/* Printed, the policies are black on white with the one-colour logo. */
@media print{
  .doc{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  .doc header{padding:0 0 18pt}
  .doc .logo-static{width:150pt}
  .doc .logo-static path{fill:#0D0E10}
  .doc main{width:auto;padding:0}
  .doc h1,.doc h2,.doc p strong,.doc th{color:#000}
  .doc h2{break-after:avoid}
  .doc tr,.doc li{break-inside:avoid}
  .doc a{color:#000}
  .doc .meta,.doc footer,.doc footer a{color:#50565D}
  .doc th,.doc td,.doc footer{border-color:#8E949A}
  .doc footer{padding:14pt 0 0;margin-top:18pt}
}